useAsyncValidation

useAsyncValidation(validator: Function) provides the async validation logic to any Field.

const [asyncStatus, validationAsyncAttr] = useAsyncValidation(fn);

Arguments

validator: function

A function which receives the value of the field and returns a promise.

Returns

(validationAsyncProps): array

An array that holds:

asyncStatus: object
- A plain object that holds a prop named status and a prop named value.
- status might be one of the following:
  - "undefined" : async validation did not start yet
  - "asyncStart" : async validation has started
  - "asyncSuccess" : the promise has been resolved with success
  - "asyncError" : the promise has been rejected
- value is the value returned by the promise
validationAsyncAttr: object
- A plain object which contains all the props that must be spreaded to the Field.

Basic usage

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

root:{} 0 keys

() => {
  const asyncTest = value =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value.length <= 3) {
          reject('Error')
        } else resolve('Success')
      }, 1500)
    })
  const [asyncStatus, validationProps] = useAsyncValidation(asyncTest)
  return (
    <Form>
      <Input
        type="text"
        name="name"
        touched
        placeholder="Name"
        {...validationProps}
      />
      {asyncStatus.status === undefined && (
        <label>Async Check Not Started Yet</label>
      )}
      {asyncStatus.status === 'asyncStart' && <label>Checking...</label>}
      {asyncStatus.status === 'asyncError' && (
        <label>{asyncStatus.value}</label>
      )}
      {asyncStatus.status === 'asyncSuccess' && (
        <label>{asyncStatus.value}</label>
      )}
    </Form>
  )
}

() => {
  const asyncTest = value =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value.length <= 3) {
          reject('Error')
        } else resolve('Success')
      }, 1500)
    })
  const [asyncStatus, validationProps] = useAsyncValidation(asyncTest)
  return (
    <Form>
      <Input
        type="text"
        name="name"
        touched
        placeholder="Name"
        {...validationProps}
      />
      {asyncStatus.status === undefined && (
        <label>Async Check Not Started Yet</label>
      )}
      {asyncStatus.status === 'asyncStart' && <label>Checking...</label>}
      {asyncStatus.status === 'asyncError' && (
        <label>{asyncStatus.value}</label>
      )}
      {asyncStatus.status === 'asyncSuccess' && (
        <label>{asyncStatus.value}</label>
      )}
    </Form>
  )
}

useAsyncValidation

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Arguments

Returns

Basic usage

Arguments