useValidation

useValidation(functions: Array) provides the validation logic to any Field.

const [status, validation] = useValidation([fn1, fn2, ...fnN])

Arguments

functions: array

• A validation function is a pure function which receives the field value and checks whether the value is valid or not, returning undefined or null if it is valid, or a string with some custom message if it is not valid.

Returns

(validationProps): array

An array that holds:

• status: object

  A plain object that holds a prop named error. The value of error might be "undefined", if all validation functions have passed the validation with success, or a "string" if one of the validation functions returns an error message.

• validationAttr: object

  A plain object which contains all the props that must be spread to the field.

Basic usage

import { Form, Input, useValidation } from 'usetheform'

() => {
  const required = value => (value && value !== '' ? undefined : 'Required')
  const [status, validationAttr] = useValidation([required])
  return (
    <Form>
      <Input
        type="text"
        name="username"
        touched
        placeholder="Username"
        {...validationAttr}
      />
      {status.error && <label>{status.error}</label>}
    </Form>
  )
}