Introduction

Welcome to this tutorial on utilizing React Hook Form, a versatile and efficient library for handling forms within React applications. Forms are an integral part of web development, enabling users to input and submit data. Managing forms effectively is crucial for providing a seamless and user-friendly experience.

In this tutorial, we’ll delve into the features and usage of React Hook Form, a powerful form management library based on React hooks. We’ll guide you through setting up the form, implementing validation, capturing user input, and handling submissions. Our aim is to equip you with the knowledge to create robust and interactive forms in React applications.

Why React Hook Form?

React Hook Form simplifies form management by leveraging the power of React hooks. It provides a performant and intuitive way to manage form state, handle validation, and interact with form inputs. With React Hook Form, you can streamline the development process, improve form responsiveness, and enhance user interactions.

Key advantages of using React Hook Form include:

1. Efficiency and Performance:
   • React Hook Form optimizes re-renders and reduces unnecessary rendering, resulting in faster and more efficient applications.
2. Simple and Intuitive API:
   • The library offers an easy-to-understand API, making it straightforward to manage forms and access form state using functional components and hooks.
3. Built-in Validation Support:
   • React Hook Form integrates seamlessly with validation libraries like Yup, allowing for efficient validation and error handling.
4. Minimal Boilerplate:
   • The library minimizes boilerplate code, providing a cleaner and more concise approach to form development.

Throughout this tutorial, we’ll explore how to create a registration form that collects a username, email, and allows users to select a fruit from a predefined list. We’ll showcase the simplicity and effectiveness of React Hook Form while highlighting best practices for building forms in React.

Let’s dive into the tutorial and harness the capabilities of React Hook Form to build interactive and responsive forms for your React applications.

We’ll create a simple form that collects a username, email, and allows users to select a fruit from a predefined list.

Step 1: Setup

First, you need to set up a new React project or use an existing one. Let’s assume you have a React project initialized using Create React App.

npx create-react-app react-hook-form-tutorial
cd react-hook-form-tutorial

Install React Hook Form

npm install react-hook-form 

Setting Up the Form Component

First, we import necessary dependencies and set up the initial structure of our form component. We’re using useForm from react-hook-form to manage the form state and validation rules.

import React from 'react';
import { useForm } from 'react-hook-form';
import options from './optionsList'; 

export const RhsForm = () => {
  const form = useForm<FormData>();

  interface FormData {
    username: string;
    email: string;
    fruit: string;
  }

  const { register, handleSubmit, formState: { errors } } = form;

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

  const sortedOptions = options.slice().sort();

  return (
    <div>
      <h1>Form</h1>
      {/* Form content will go here */}
    </div>
  );
};

Building the Form

Now let’s add the form fields and logic for validation. We’ll have fields for username, email, and a dropdown to select a fruit.

// Inside the return statement of RhsForm component

<form onSubmit={handleSubmit(onSubmit)}>
  <label htmlFor="username">Username</label>
  <input 
    type="text" 
    id="username" 
    {...register('username', { 
      required: 'Username is required', 
      pattern: {
        value: /^[a-zA-Z]{5,}$/,  // At least 5 letters
        message: 'Username should have more than 4 letters'
      } 
    })}
  />
  {errors.username && <p>{errors.username.message}</p>}

  <label htmlFor="email">E-mail</label>
  <input 
    type="email" 
    id="email" 
    {...register('email', { 
      required: 'Email is required', 
      pattern: { 
        value: /^\S+@\S+$/i, 
        message: 'Invalid email address' 
      } 
    })}
  />
  {errors.email && <p>{errors.email.message}</p>}

  <label htmlFor="fruit">Select a fruit:</label>
  <select id="fruit" {...register('fruit')}>
    {sortedOptions.map((option) => (
      <option key={option} value={option}>
        {option}
      </option>
    ))}
  </select>

  <div>
    <button type="submit">Submit</button>
  </div>
</form>

In this part, we’re using the register function from react-hook-form to register form fields and specify validation rules like required and pattern. The handleSubmit function manages form submission and triggers the onSubmit function, logging the form data to the console.

Integrating Predefined Options

Lastly, we’re providing a dropdown with options from an external source.

const sortedOptions = options.slice().sort();

...

<select id="fruit" {...register('fruit')}>
  {sortedOptions.map((option) => (
    <option key={option} value={option}>
      {option}
    </option>
  ))}
</select>

Here, we’re mapping over the sortedOptions array and generating <option> elements for the dropdown menu.

Github Project Link: https://github.com/Monishamacharla/react-hook-forms-tutorial

In summary, this tutorial demonstrates how to use React Hook Form to create a form with input validation. The form collects a username, email, and allows the selection of a fruit. Validation rules are applied to the form fields, and the form data is logged upon submission. Additionally, a dropdown menu is populated with predefined options.