React useForm Hooks
A simple and declarative way to validate your forms in React.
Example usage
Create your stateSchema
Your stateSchema is an object key value-pair contains the value of an input and the current error if any.
const stateSchema = {
first_name: { value: '', error: '', },
last_name: { value: '', error: '', },
tags: { value: '', error: '', },
};
Create validation in your stateSchema
Property should be the same in your stateSchema in-order validation works. validator prop accepts a func that you can be use to validate your state via regEx.
const stateValidatorSchema = {
first_name: {
required: true,
validator: {
func: value => /^[a-zA-Z]+$/.test(value),
error: 'Invalid first name format.',
},
},
last_name: {
required: true,
validator: {
func: value => /^[a-zA-Z]+$/.test(value),
error: 'Invalid last name format.',
},
},
tags: {
required: true,
validator: {
func: value => /^(,?\w{3,})+$/.test(value),
error: 'Invalid tag format.',
},
},
};
Passed your stateSchema and stateValidatorSchema in useForm hooks. 3rd parameter is (optional) callback function to be called when you submit your form if all fields is valid.
const {
values,
errors,
handleOnChange,
handleOnSubmit,
disable
} = useForm(stateSchema, stateValidatorSchema, onSubmitForm);
Demo
Working demo here.
Contributing
Feel free to contribute in this project.
License
This project is under MIT License.