React hook form library tutorial with examples

-

 

React Hook Form Tutorial with Examples

React Hook Form is a popular library for handling forms in React. It provides a simple and efficient way to manage form state, validation, and submissions using React hooks. It’s lightweight, flexible, and helps in reducing re-renders, making it faster than traditional form handling techniques.

In this tutorial, we will explore how to set up and use React Hook Form with various examples, including handling form validation, errors, and submitting data.

1. Installation

To get started with React Hook Form, you need to install it in your project.

npm install react-hook-form

2. Basic Example

Let's start with a simple form that takes the user's name and email and displays the submitted values.

App.js


import React from "react";
import { useForm } from "react-hook-form";

function App() {
  // useForm hook for form handling
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Handle form submission
  const onSubmit = (data) => {
    console.log("Form Data:", data);
  };

  return (
    <div className="App">
      <h1>React Hook Form Example</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>Name:</label>
          <input
            type="text"
            {...register("name", { required: "Name is required" })}
          />
          {errors.name && <span>{errors.name.message}</span>}
        </div>

        <div>
          <label>Email:</label>
          <input
            type="email"
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/,
                message: "Invalid email address",
              },
            })}
          />
          {errors.email && <span>{errors.email.message}</span>}
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Explanation:

  • useForm: This hook is used to initialize the form. It provides methods like register, handleSubmit, and formState.
  • register: It connects your form inputs with React Hook Form. It takes the name of the input and an optional configuration object (e.g., validation rules).
  • handleSubmit: This function wraps your form submission handler. It ensures that the form is valid before calling the onSubmit function.
  • errors: This is part of formState. It contains any validation errors for the form fields.

Validation Rules:

  • required: Ensures that the field is filled.
  • pattern: Ensures the field matches a specific regex pattern (e.g., email).

Form Submission Output

When you submit the form, the output will be logged in the browser’s console.

3. Controlled vs Uncontrolled Inputs

By default, React Hook Form uses uncontrolled components, which means React doesn't directly manage the form values. However, you can opt for controlled components if necessary.

Here is an example of a controlled component in React Hook Form:


import React, { useState } from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, setValue, getValues, formState: { errors } } = useForm();
  const [formValues, setFormValues] = useState({ name: "", email: "" });

  const onSubmit = (data) => {
    console.log("Form Data:", data);
  };

  // Handling controlled inputs with state
  const handleInputChange = (e) => {
    setFormValues({ ...formValues, [e.target.name]: e.target.value });
    setValue(e.target.name, e.target.value); // Update the value in the react-hook-form state
  };

  return (
    <div className="App">
      <h1>Controlled Component Example</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>Name:</label>
          <input
            type="text"
            name="name"
            value={formValues.name}
            onChange={handleInputChange}
            {...register("name", { required: "Name is required" })}
          />
          {errors.name && <span>{errors.name.message}</span>}
        </div>

        <div>
          <label>Email:</label>
          <input
            type="email"
            name="email"
            value={formValues.email}
            onChange={handleInputChange}
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/,
                message: "Invalid email address",
              },
            })}
          />
          {errors.email && <span>{errors.email.message}</span>}
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;
  • In this example, we use setValue to update the value in the React Hook Form's internal state whenever the input value changes.

4. Form Validation

React Hook Form provides built-in validation capabilities like required, minLength, maxLength, pattern, etc., but you can also use Yup or Joi for more complex validation.

Example with Yup for Validation

First, install Yup and react-hook-form's resolver for Yup:


npm install yup @hookform/resolvers

App.js with Yup Validation:


import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object({
  name: yup.string().required("Name is required").min(3, "Name must be at least 3 characters"),
  email: yup.string().email("Invalid email format").required("Email is required"),
}).required();

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => {
    console.log("Form Submitted Data:", data);
  };

  return (
    <div className="App">
      <h1>React Hook Form with Yup Validation</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>Name:</label>
          <input type="text" {...register("name")} />
          {errors.name && <span>{errors.name.message}</span>}
        </div>

        <div>
          <label>Email:</label>
          <input type="email" {...register("email")} />
          {errors.email && <span>{errors.email.message}</span>}
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Explanation:

  • yupResolver: This is used to integrate Yup validation with React Hook Form.
  • yup.object(): This creates a validation schema with field validation rules.
  • required, min, email: These are some common validation rules provided by Yup.

Error Handling with Yup:

If there are validation errors, they are displayed under each form field.

5. Dynamic Forms

React Hook Form also supports dynamic forms where you can add or remove form fields dynamically.

App.js with Dynamic Fields Example:


import React, { useState } from "react";
import { useForm, useFieldArray } from "react-hook-form";

function App() {
  const { control, register, handleSubmit } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "users", // This will be the field array name
  });

  const onSubmit = (data) => {
    console.log("Submitted Data: ", data);
  };

  return (
    <div className="App">
      <h1>Dynamic Form with React Hook Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {fields.map((item, index) => (
          <div key={item.id}>
            <input
              {...register(`users[${index}].name`, { required: "Name is required" })}
              defaultValue={item.name} // input default value
            />
            <button type="button" onClick={() => remove(index)}>Remove</button>
            <br />
          </div>
        ))}
        <button type="button" onClick={() => append({ name: "" })}>Add User</button>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Explanation:

  • useFieldArray: This hook is used to handle dynamic arrays of fields. You can append new fields or remove existing ones.
  • append(): Adds a new field to the array.
  • remove(): Removes a field from the array based on the index.

Conclusion

In this tutorial, we’ve learned how to use React Hook Form to manage forms in React. We've explored basic usage, form validation with Yup, handling controlled and uncontrolled components, and creating dynamic forms with useFieldArray.

React Hook Form is highly efficient for managing complex forms and integrates well with validation libraries like Yup, making it a powerful tool for building forms in React.

You can visit the official React Hook Form documentation for more advanced use cases and API details.

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more