React Form Hook to handle complex payloads, errors, validation with ease
npm install @reusejs/react-form-hookreact-form-hook is a package for reactJs which simplifies form handling process.
it simplifies the implementaion of form validation and error.handling.
$ npm i @reusejs/react-form-hook
or
$ yarn add @reusejs/react-form-hook
- https://www.npmjs.com/package/lodash
- https://www.npmjs.com/package/validate.js
#### Form Processing
| Function | Description | Usage |
|------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------|
| setField | sets the value of a field in the form Object. | form.setField('name', 'Jon Doe'); |
| getField | gets the value of a field in the form Object | form.getField('name'); |
| busy | indicates when a form is processing action. We can access this flag in the component and show a loader based on its value. | form.busy |
| startProcessing | sets busy flag as true. Clears Errors Object. | form.startProcessing(); |
| finishProcessing | sets busy flag as false. | form.finishProcessing(); |
| resetStatus | resets the errors object in the form, and sets busy flag to false | form.resetStatus() |
#### Validation
| Function | Description | Usage |
|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------|
| setValidationRules | Set validation Rules for the form. Expects a validateJs Constraints Format. | form.setValidationRules(constraints); |
| validate | Validate the complete form object based on the constraints defined. Sets the error object for each field. Returns true if no errors, else returns false | form.validate(); |
| validateSingleField | Validate a single field of a form object and sets the Error for this field. Returns true if no errors, else returns false | form.validateSingleField('email'); |
#### Errors
| Function | Description | Usage |
|--------------|-------------------------------------------------------------------------------------------------------------|----------------------------------|
| setErrors | sets errors for the form fields.
You can set errors manually if you are not using Validate functionality | form.setErrors(errors) |
| pushError | append errors to the existing form errors object. | form.pushError(newErrorObject) |
| forgetErrors | clear the errors object for the form. | form.forgetErrors() |
| hasErrors | checks if the a form object hasErrors or not. | form.errors.hasErrors() |
| has | checks if a particular field of the form has errors. | form.errors.has('email') |
| all | gets all the errors of the form object. | form.errors.all() |
| flatten | Flattens the Error object and get all the error messages in form of an array. | form.errors.flatten() |
| get | get errors for a single field. | form.errors.get('email') |
jsx
import React, { useEffect } from "react";
import useBetaForm from "@reusejs/react-form-hook";// Define Validation Rules for the form fields (Refer to validateJs)
const constraints = {
name: {
presence: { allowEmpty: false, message: "this field is required" },
},
email: {
presence: { allowEmpty: false, message: "this field is required" },
},
phone_number: {
presence: { allowEmpty: false, message: "this field is required" },
},
};
export default function App() {
// initialise form object
const form = useBetaForm({
name: "",
email: "",
phone_number: "",
});
// set validation rules for the form when the component is mounted.
useEffect(() => {
form.setValidationRules(constraints);
}, []);
const handleSubmit = () => {
// validate the all the form fields
const valid = form.validate();
if (valid) {
// make api call
}
};
const validateEmail = (email) => {
// validate single form field
const isValid = form.validateSingleField("email");
};
return (
);
}
``