I am not going to suport this library anymore. I don't see a reason of it anymore. Let's use and support react-hook-form
instead.
npm i -S react-hook-form-validation
or
yarn add react-hook-form-validation
- 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
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(),
],
}]);
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),
],
}]);
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),
],
}]);
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'),
],
}]);
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'),
],
}]);
import useValidation, {validateEmail} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateEmail(),
],
}]);
import useValidation, {validateUrl} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateUrl(),
],
}]);
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),
],
}]);
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),
],
}]);
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),
],
}]);
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(', ')}.`
})
],
}]);