react-hook-form-validation v3.0.1

React Hook Form Validation

Table of contents

• Installation
• Validators

Installation

npm i -S react-hook-form-validation

or

yarn add react-hook-form-validation

The hook currently supports the following validators

• Required value
• Min value of a number
• Max value of a number
• Min length of a string or an array
• Max length of a string or an array
• Email address
• URL
• RegEx pattern
• Custom function

Required

This validator can be useful if you want to be sure that your input value is defined, is not an empty string, array or object and is not a null.

Note that other validators do not perform their logic if empty value passed to them. So, make sure you use required validator if needed.

import useValidation, {validateRequired} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateRequired(),
    ],
}]);

Min Number

If you need to ensure your input value not less than expected. It can compare numbers or strings like numbers.

import useValidation, {validateMin} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateMin(5),
    ],
}]);

Max Number

If you need to ensure your input value not more than expected. It can compare numbers or string like numbers.

import useValidation, {validateMax} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateMax(5),
    ],
}]);

Min Length

If you need to ensure your input contains not less characters or items than expected. It can compare length of a string or an array.

import useValidation, {validateMin} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateMin(5, 'length'),
    ],
}]);

Max Length

If you need to ensure your input contains not more characters or items than expected. It can compare length of a string or an array.

import useValidation, {validateMax} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateMax(5, 'length'),
    ],
}]);

Email

import useValidation, {validateEmail} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateEmail(),
    ],
}]);

URL

import useValidation, {validateUrl} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validateUrl(),
    ],
}]);

Pattern

In case you need to validate your input based on any random RegEx pattern you interested in

import useValidation, {validatePattern} from 'react-hook-form-validation';

useValidation([{
    field: 'field-name',
    rules: [
        validatePattern(/^[abc]+$/ui),
    ],
}]);

Func

Sync

In case you need to implement much more complex validation you can use func validator. It allows you to implement any validation logic you need. Even based on asynchronous logic.

A function has to return true in case of you value is valid and vice versa.

import useValidation, {validateFunc} from 'react-hook-form-validation';

function isEven(input) {
    const value = Number(input);
    return !Number.isNaN(value) && value % 2 === 0;
}

useValidation([{
    field: 'field-name',
    rules: [
        validateFunc(isEven),
    ],
}]);

Async

It can be useful if you need to compare your value with result of asynchronous query:

import useValidation, {validateFunc} from 'react-hook-form-validation';

function asyncFunction(value) {
    return new Promise(() => setTimeout(() => false, 1000));
}

useValidation([{
    field: 'field-name',
    rules: [
        validateFunc(asyncFunction),
    ],
}]);

Misc

Sometimes you may need to print something more specific rather than just "valid" or "invalid". For that purpose you may return an array from your function. Where the first element should be a sign of validity, and the rest will be proxied into the message builder function.

import useValidation, {validateFunc} from 'react-hook-form-validation';

function guessFruit(input) {
    if (typeof input !== 'string') {
        return false;
    }
    const FRUITS = ['apple', 'banana', 'kiwi'];
    if (FRUITS.includes(input.toLowerCase())) {
        return true;
    }
    return [false, ...FRUITS];
}

useValidation([{
    field: 'field-name',
    rules: [
        validateFunc(asyncFunction, {
            fail: ({payload}) => `Guessed wrong. It should have been ${payload.join(', ')}.`
        })
    ],
}]);