Using React Hook Form

Using React Hook Form

As we have seen in the previous sections, managing form state and validation can be a complex task in React. However, with the introduction of libraries like React Hook Form, this process has become much simpler and more efficient.A react Hook Form is a library that helps you manage form state and validation in React applications with ease. It provides a simple API and integrates well with existing UI libraries.

Installation

To get started with React Hook Form, you need to install it in your project. You can do this using npm :

npm install react-hook-form

Basic Usage

To use React Hook Form, you need to import the useForm hook from the library and use it in your component. Here’s a simple example of how to create a form with validation using React Hook Form:

import React from 'react';
import { useForm } from 'react-hook-form';
import './App.css';
import { useState } from 'react';
const App = () => {
    const { register, handleSubmit, formState: { errors , isSubmitting} } = useForm();
    const [formData, setFormData] = useState(null);

    const onSubmit = (data) => {
        setFormData(data);
    };

    return (
        <div className="App">
            <h1>React Hook Form Example</h1>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div>
                    <label htmlFor="name">Name:</label>
                    <input type="text" id="name" {...register('name', { required: true,minLength: 10 })} />
                    {errors.name && <span>This field is required above 10 characters</span>}
                </div>
                <div>
                    <label htmlFor="email">Email:</label>
                    <input type="email" id="email" {...register('email', { required: true })} />
                    {errors.email && <span>This field is required</span>}
                </div>
                <button type="submit" disabled={isSubmitting}>Submit</button>
            </form>

            {formData && (
                <div>
                    <h2>Form Data:</h2>
                    <div>Name: {formData.name}</div>
                    <div>Email: {formData.email}</div>
                    <div>isSubmitting: {isSubmitting ? 'true' : 'false'}</div>
                </div>
            )}
        </div>
    );
};
export default App;

Explanation

• useForm: This hook provides methods to manage form state and validation.
• register: This method is used to register input fields and their validation rules.
• handleSubmit: This method is used to handle form submission.
• formState: This object contains the form state, including errors and submission status.
• errors: This object contains validation errors for each field.
• isSubmitting: This boolean indicates whether the form is currently being submitted.

Validation

List of validation rules:

• required: This rule makes the field required.
• minLength: This rule sets a minimum length for the field.
• maxLength: This rule sets a maximum length for the field.
• pattern: This rule sets a regex pattern for the field.
• min: This rule sets a minimum value for the field.
• max: This rule sets a maximum value for the field.
• validate: This rule allows you to define custom validation logic.

we can use the combination of these rules to create complex validation logic.like

<input type="text" id="name" {...register('name', { required: true,minLength: 10 })} />

Disable Prop

The disabled prop is used to disable the input field. This can be useful when you want to prevent users from interacting with the field until certain conditions are met.

<input type="text" id="name" {...register('name', { required: true,minLength: 10 })} disabled={isSubmitting} />

Conclusion

React Hook Form is a powerful library that simplifies form management and validation in React applications. It provides a simple API and integrates well with existing UI libraries, making it a great choice for developers looking to streamline their form handling process.