use-validation-react v1.0.6

use-validation-react

A simple react hook for all your form validations.

How to install:

Install via npm

npm i use-validation-react

or via yarn

yarn add use-validation-react

How to use:

Library exports useValidation hook. The hook accepts one argument, validation records

const validations = {
  name: [
    {
      rule: ValidationRule.Required,
      errorMessage: 'Please provide a valid first name',
    },
  ],
  about: [
    {
      rule: ValidationRule.MinLength,
      errorMessage: 'About should be 20 characters or more',
      meta: 20
    },
  ],
  phoneNumber: [
    {
      rule: ValidationRule.Phone,
      errorMessage: 'Please provide a valid phone number',
    },
  ],
  email: [
    {
      rule: ValidationRule.Email,
      errorMessage: 'Please provide a valid email',
    },
  ],
}

You could then use these validation rules inside your component as below Note: The property names in your object that you need to validate should match the property names inside your validation rules.

const Profile = () => {
  const [profileData, setProfileData] = useState({
    name: '',
    about: '',
    phoneNumber: '',
    email: '',
  });
  
  const {
    validationResult,
    isValidated,
    isFormValid,
    validateFormElement,
    clearValidations,
    validateAll
  } = useValidation(updateProfileValidations);
  
  return (
    <>
      <input type="text" value={profileData.name} />
      ...
    </>
  )
}

To check if your form is valid, you simply call isFormValid with the object to validate

const formIsValid = await isFormValid(profileData);

This will run validation for your whole form and return true or false.

You may also want to show error messages for each input that is invalid.

You could access the validation result for each input using validationResult

e.g., To show an error message for name input, you could use the following: Note: Validation are only run on demand. To know if validations have been run use isValidated boolean.

<input type="text" value={profileData.name} />
{isValidated && !validationResult['name'].isValid && (<div>{validationResult['name'].messages[0]}</div>)}

This will display an error message if name input has been validated and the validation returned false.

What can you use?

Available Validation Rules