@reusejs/react-form-hook
react-form-hook is a package for reactJs which simplifies form handling process. it simplifies the implementaion of form validation and error.handling.
Get Started
Install the package with your package manager
$ npm i @reusejs/react-form-hook
or
$ yarn add @reusejs/react-form-hook
Install the dependencies for this package
API
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') |
Usage
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 (
<div className="App">
<form>
<div className="form-el-wrapper">
<label className="label" htmlFor="name">
Name
</label>
<br />
<input
name="name"
value={form.getField("name")}
id="name"
onChange={(v) => {
form.setField("name", v.target.value);
}}
/>
{form.errors.has("name") && (
<div className="error">{form.errors.get("name")[0]}</div>
)}
</div>
<br />
<div className="form-el-wrapper">
<label className="label" htmlFor="email">
Email
</label>
<br />
<input
name="email"
value={form.getField("email")}
id="email"
type="email"
onChange={(v) => {
form.setField("email", v.target.value);
}}
onBlur={(v) => validateEmail(v.target.value)}
/>
{form.errors.has("email") && (
<div className="error">{form.errors.get("email")[0]}</div>
)}
</div>
<br />
<div className="form-el-wrapper">
<label htmlFor="phone_number">Phone Number</label>
<br />
<input
name="phone_number"
value={form.getField("phone_number")}
id="phone_number"
onChange={(v) => {
form.setField("phone_number", v.target.value);
}}
/>
{form.errors.has("phone_number") && (
<div className="error">{form.errors.get("phone_number")[0]}</div>
)}
</div>
<br />
<button type="button" onClick={() => handleSubmit()}>
Submit{" "}
</button>
</form>
</div>
);
}