React Hook Form: A complete guide using mui

Effective form management and a well-designed user interface are crucial when creating contemporary React applications. This tutorial shows how to start from scratch with a project that uses React Hook Form for form management and Material UI (MUI) for style.

Why Choose React-Hook-Form?

Effective form management and a well-designed user interface play a crucial role in creating modern and user-friendly React applications. Forms are often central to capturing user input, handling validations, and ensuring seamless interactions within web applications. This tutorial provides a step-by-step guide on how to start from scratch with a project that leverages the powerful features of React Hook Form for efficient and lightweight form management. Additionally, it demonstrates how to enhance the visual appeal and consistency of the user interface by incorporating Material UI (MUI), a popular component library known for its elegant and customizable design solutions.

Getting Started

To build a project follow the steps outlined below.

Installation

First, set up your React project using Yarn:

yarn create react-app mui-rhf-demo --template typescript
cd mui-rhf-demo

Next, install MUI and RHF:

yarn add @mui/material @emotion/react @emotion/styled react-hook-form

If you plan to use icons, add MUI Icons:

yarn add @mui/icons-material

Setting Up the Form

Organize your project for clarity. Here’s a suggested structure:

mui-rhf-demo/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── App.tsx
│   └── index.tsx
└── package.json

Using React Hook Form

Use the Controller method in addition to regular registration to create a form component that exhibits validation.

Use standard registration for simple input fields:

<TextField
  fullWidth
  label="Name"
  {...register("name", { required: "Name is required" })}
  error={!!errors.name}
  helperText={errors.name?.message}
  margin="normal"
/>

Controller Registration Example

Use the Controller component for complex or controlled components:

<Controller
  name="email"
  control={control}
  rules={{
    required: "Email is required",
    pattern: {
      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: "Invalid email format",
    },
  }}
  render={({ field }) => (
    <TextField
      fullWidth
      label="Email"
      {...field}
      error={!!errors.email}
      helperText={errors.email?.message}
      margin="normal"
    />
  )}
/>

Example Validations

Here’s how you can implement some common form validations:

• Required Fields: Ensure that fields are not left empty.
• Email Validation: Use regular expressions to validate email format.
• Password Length: Set minimum character requirements.

Running the Application

Start the development server:

yarn start

Visit http://localhost:3000 to see your form in action.

Conclusion

In this blog, we showed you how to create a project with React-Hook-Form for efficient forms handling and MUI for styling. This combination makes it possible to swiftly and effectively create scalable and user-friendly applications. Have fun with your coding!

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.