light-react-validator is a validator very fast, very small, and with extra flexibility!
Made with create-react-library
The validator follows the "prototypal inheritance" model for the configuration. The idea is simple: The closest to the element rules and messages have higher priority, therefore they override the farther ones. For example, built-in validators are overridden by the user's global config validators (customValidators), which are overridden by element-specific validators. Same thing with error messages. Because light-react-validator doesn't have any default error messages (yet), the element-specific error messages override the global config messages. Also, the light-react-validator re-renders only when it is necessary, hence it is very fast!
- Very light
- Very flexible
- Full customizable
- 0 configuration
- Built-in validators
npm install --save light-react-validatorimport React from 'react' import { useValidator } from 'light-react-validator' const MyComponent = () => { const { track, submitForm, errors, formValidity } = useValidator() return ( <label htmlFor='email'>Email</label> <input ref={(elem) => track(elem, { rules: { required: true, email: true }, messages: { required: 'email is required', email: 'is not an email' } }) } name='email' onChange={(e) => console.log('original onChange ', e.target.value)} onFocus={(e) => console.log('original onfocus ', e.target.value)} type='text' id='email' /> {errors?.email && showErrors(errors.email)} ) }import React from 'react' import { useValidator } from 'light-react-validator' const config = { customValidators: { email: (input: string): boolean => /^\w+([-]?\w+)*@\w+([-]?\w+)*(\.\w{1})+$/.test(input) }, errorOnInvalidDefault: true, validateFormOnSubmit: true, globalMessages: { required: 'this input is required' }, globalOptions: { minLength: 5} } const MyComponent = () => { const { track, submitForm, errors, formValidity } = useValidator(config) const submit = submitForm((e) => { // any code }) return ( <form id='form' onSubmit={(e) => submit(e)}> <div className='form-group'> <label htmlFor='email'>Email</label> <input ref={(elem) => track(elem, { rules: { required: true, email: true, minLength: true }, messages: { required: 'email is required', email: 'is not an email' }, options: { minLength : 3 } }) } name='email' onChange={(e) => console.log('original onChange ', e.target.value)} onFocus={(e) => console.log('original onfocus ', e.target.value)} type='text' id='email' defaultValue='test@test.gr' /> {errors?.email && showErrors(errors.email)} </div> <button disabled={!formValidity} type='submit'> Submit </button> </form> ) }The useValidator accepts a config as described below and returns an object with the following properties:
| Property | Description | Type | Default |
|---|---|---|---|
| track | This function initialize the "watcher" for this specific input. Should be passed as on the example below | function | - |
| submitForm (optional) | This function is a hof function (high order function).The first's function argument is a function which runs on form submit after successful validation and the second's functions argument is the event | function | - |
| errors | An object with the errors if any errors exist. The errors are separated by input's name on depth 0 and with validation rule on depth 1. | object | {} |
| formValidity | The current validity status | boolean | true |
In order to the validator watch, the input should be passed to the ref through the hook's track function. Note: Each field is required to have a unique name as a key.
<input ref={(elem) => track(elem, { rules: { required: true, email: true }, messages: { required: 'email is required', email: 'is not an email' }, customValidators: { // custom validation rules }, options: { //options which passed in specific validators // validators and options properties must have same name! } }) } name='email' onChange={(e) => console.log('original onChange ', e.target.value)} onFocus={(e) => console.log('original onfocus ', e.target.value)} type='text' id='email' defaultValue='test@test.gr' />const submit = submitForm((e) => { // any code }) <form id='form' onSubmit={(e) => submit(e)}> // any code </form>errors:{ email:{required:"email is required",email:"is not an email"}, free:{required:"free is required"}, drone:{required:"radio is required"}, vehicle:{required:"checkbox is required"}, groupCheckbox:{required:"checkbox is required",minCheckboxes:"you should check at least 2 checkboxes"}, number:{required:"number is required"}, select:{required:"select is required"} }The light-react-validator hook accepts custom config with the following properties:
| Variable | Description | Type | Default |
|---|---|---|---|
| customValidators | You can specify custom validators in order to override the built-in validators | object | undefined |
| validateFormOnSubmit | Validation starts on submit | boolean | false |
| errorOnInvalidDefault | If an input has default value on render, it shows the error immediately | boolean | false |
| globalMessages | Global error messages | object | undefined |
| globalOptions | Global options | object | undefined |
Note: All the above properties are optional.
custom config example
const config = { customValidators: { email: (input: string): boolean => /^\w+([-]?\w+)*@\w+([-]?\w+)*(\.\w{1})+$/.test(input), emailWithSpecificDomain: (input: string, domain: string): boolean => /^\w+([-]?\w+)*@\w+([-]?\w+)*(\.\w{2,3})+$/.test(input) && input.endsWith(domain) }, errorOnInvalidDefault: true, validateFormOnSubmit: true, globalMessages: { required: 'this input is required',email: 'is not an email', emailWithSpecificDomain: 'mail does not end with gr domain' }, globalOptions: { minLength: 5, emailWithSpecificDomain: 'gr'} } ... const { track, submitForm, errors, formValidity } = useValidator(config) ... <input ref={(elem) => track(elem, { rules: { required: true, email: true, emailWithSpecificDomain:true } }, messages: {required: 'email is required'}, options: { emailWithSpecificDomain: 'de'} ) } name='email' type='text' />The above config overrides the built-in email validator, it creates a new validator (emailWithSpecificDomain) and enables errorOnInvalidDefault, validateFormOnSubmit. Also, it sets a global error message for the required, email, emailWithSpecificDomain rules in case that an element does not have any error messages of them. Moreover, it sets minLength rule 5 which applies on all inputs with minLength rule but without input option specifically for this rule. When the validation occurs, the input will validate against 3 rules required, email, emailWithSpecificDomain. The error message and the emailWithSpecificDomain will get them from the input and the rest from the global config
The light-react-validator has 3 types of validators:
- Built-in
- Global config
- Input-specific
Input specific validators overrides Global config validators and those overrides BuiltIn validators
- required
- minLength
- maxLength
- minCheckboxes
| Built-in | Arguments |
|---|---|
| required | value: T |
| input: string | |
| minLength | input: string, len: number |
| maxLength | input: string, len: number |
| minCheckboxes | input: any, availableOptions: any |
In order to pass additional arguments to the validator, the arguments should be declared on the options property. !Important the validator and the extra arguments should have the same name!
- Docs
- Examples
- More features
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
The initial idea came from react-hook-form
MIT © thstamod