The problem
Handling forms in react can be a little bit tedious especially for new beginners like me 😃. I often find myself re-writing the same stateful logic and form validations, especially when I have different forms in different components (such as signup, login, profile update form).
Inspiration
My mentor @benfluleck suggested I abstract my form logic so that it can easily be reusable. I created a useForm hook and showed it to him and my other colleague. To my surprise, they loved it and adviced that I made some improvements on it and also upload it to npm as a library.
The solution
useFormBee is a custom react hook that helps me manage and abstract form logic.
Form logic such as
- values
- onChange
- onSubmit
- onReset
Harnessing the power of validatorjs, I integrated validations to the useForm hooks.
Installation
This module is distributed via npm
npm install useformbee
Usage
Import
;
const values errors handleChange handleSubmit handleReset = ;
Parameter
useformbee takes an object as its parameter. The object parameter must have two attribute callback
and rules
.
-
The
callback
is the function that will be called when the form is submitted and passes all validation. -
The
rules
is an object of validatorjs rules
Returns
useformbee returns an object of 5 attributes.
- values (object)
- errors (object)
- handleChange (function)
- handleSubmit (function)
- handleReset (function)
Form Example
const Form = { // prepare your inputs rules // read more about validatorjs rule -> https://www.npmjs.com/package/validatorjs const rules = firstName: 'alpha|required' age: 'numeric' ; // create you callback function const saveFormData = { // ...your logic }; const values handleChange handleSubmit errors handleReset = ; // destructure field values // the values is created from Object.keys(rules) const firstName age = values; return <form onSubmit=handleSubmit onReset=handleReset> <input type='text' value =firstName onChange=handleChange name='firstName' required /> /* display username error if there is an error */ errorsfirstName && <p>errorsfirstName </p> <br /> <input type='text' value =age onChange=handleChange name='age' /> /* display age error if there is an error */ errorsage && <p>errorsage</p> <br /> <button type='submit'>Submit</button> <button type='reset'>Reset</button> </form> ;};
Contributors
Thanks goes to these people (emoji key)
Ezekiel Ilori 🤔 💻 ⚠️ 📖 |
Benny Ogidan 👀 ⚠️ |