validation.js

// Minimal working example demonstrating the two-way data binding with React Hook.
import { useLink } from 'valuelink'
import * as React from 'react'

// We don't want to deal with error markup in every input, do we?
const Input = ({ link, ...props }) => {
    return (
      <div>
        <input {...link.props} {...props} />
        <span>{ link.error || '' }</span>
      </div>
    )
}

export const MyCoolComponent = () => {
    const name = useLink( '' );
  
    // Apply validation rules.
    name.check( x => x, 'Name is required!' )
        .check( x => x.length > 5, "Now it's too short" )
        .check( x => x[0] !== 'A', "Oh, and sorry - it can't start with A")
        .check( x => x[0] !== 'B', "...and with B as well. Sorry for that.");

    // Markup is not affected.
    return (
        <Input link={name} />
    )
}