Simple Input Validation with React Hooks

Usage no npm install needed!

<script type="module">
  import reactInputValidationHook from '';


React Input Validation

Simple Input Validation with React Hooks

Errors are only show once input is blurred, errors will update in real time once input has been blurred.


yarn add react-input-validation-hook


npm install react-input-validation-hook

// Import package
import useFormValidation from 'react-input-validation-hook'

function App() {
    // Any of these can be renamed ex: [fnErrors, firstName, isFnValid] = ...
    const [errors, myValue, isValid] = useFormValidation('init val', {minLength: 6, maxLength: 8, required: true})

    return (
            <label htmlFor="">Try typing here</label>
            {/* Use spread operator here, because onChange, onBlur and value is handled for you. */}
            <input type="text" {...myValue}/>
            <p>{isValid ? 'Value is Valid' : 'Value is Invalid'}</p>
            {/* Print out errors */}
            { => <p key={e} style={{color: 'red'}}>{e}</p>)}


const [errors, value, isValid] = useFormValidation(initialValue, [options])

Return values

DataType Description
errors Array<string> Given the options, returns an array of errors based on the options given
myValue {value: string, onChange: (event) => void, onBlur: () => void} values and helper methods to reduce writing onChange handlers all the time.
isValid boolean Given the options, returns true if value is inline with the options given


maxLength number
minLength number
required boolean
email boolean


const ... = useFormValidation('', {minLength: 3, maxLength: 8, required: true, email: true})


If you need more types of form validation, please feel free to send a PR ❤️


MIT Ⓒ SeanningTatum