react-input-validation-hook

Simple Input Validation with React Hooks

Usage no npm install needed!

<script type="module">
  import reactInputValidationHook from 'https://cdn.skypack.dev/react-input-validation-hook';
</script>

README

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.

Quickstart

yarn add react-input-validation-hook

or

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 (
        <div>
            <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 */}
            {errors.map(e => <p key={e} style={{color: 'red'}}>{e}</p>)}
      </div>
    )
}

Usage

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

Options

DataType
maxLength number
minLength number
required boolean
email boolean

example

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

Contributing

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

License

MIT Ⓒ SeanningTatum