React Hook Form Tutorial 🎯

Welcome to our comprehensive guide on React Hook Form! In this tutorial, we'll delve into the world of form handling in React using the popular library, React Hook Form. By the end of this lesson, you'll be able to create efficient and user-friendly forms in your React projects.

What is React Hook Form? 📝

React Hook Form is a powerful, opinionated form-building library for React. It simplifies form handling and validations, making it easier to create complex forms without writing a lot of code.

Why use React Hook Form? 💡

Easy to use: React Hook Form is straightforward and easy to understand, even for beginners.
Efficient: It handles form state and validation automatically, reducing boilerplate code.
Flexible: It supports various form inputs, including custom components, and integrates well with other libraries.

Getting Started 💻

Before diving into React Hook Form, make sure you have React and Node.js installed on your machine. You can create a new React app using create-react-app:

bash

npx create-react-app my-app
cd my-app

To install React Hook Form, run:

bash

npm install react-hook-form

Form Basics 👩‍💻👨‍💻

Let's create a simple form to demonstrate the basics of React Hook Form.

jsx

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

function Example() {
  const {
    register,
    handleSubmit,
    errors,
  } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Name:
        <input type="text" ref={register({ required: true })} />
        {errors.name && <span>This field is required</span>}
      </label>
      <input type="submit" />
    </form>
  );
}

export default Example;

In this example, we import useForm from React Hook Form and use its returned objects (register, handleSubmit, and errors) to create a simple form. The form includes a name field with validation for required inputs.

Form Validation 💡

React Hook Form provides various validation rules out-of-the-box. You can also create custom validation rules to suit your needs.

Here's an example of using custom validation rules:

jsx

import { useForm, ValidationError } from 'react-hook-form';

function Example() {
  const {
    register,
    handleSubmit,
    errors,
  } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Email:
        <input type="text" ref={register({ required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ })} />
        {errors.email && <ValidationError message="Invalid email address" />}
      </label>
      <input type="submit" />
    </form>
  );
}

export default Example;

In this example, we've added a custom validation rule for email addresses. If the provided email is invalid, a ValidationError component will be rendered, displaying an error message.

Form Controls 💻

React Hook Form provides various form controls, including TextInput, Select, and Checkbox. Here's an example of using a Select control:

jsx

import { useForm } from 'react-hook-form';

function Example() {
  const {
    register,
    handleSubmit,
    errors,
  } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Favorite Color:
        <select ref={register} defaultValue="red">
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>
      </label>
      <input type="submit" />
    </form>
  );
}

export default Example;

In this example, we've used the Select control with the register function to register the control for form handling.

Quiz 📝

We hope this tutorial has helped you understand the basics of React Hook Form. With these concepts, you're well on your way to creating efficient and user-friendly forms in your React projects. Happy coding! 🚀💻