Getting Started with React Hook Form and Material UI

Material UI (MUI) is a popular component library that implements Google’s Material Design system. It provides a wide range of pre-built UI components that you can use to create functional and visually appealing interfaces. Even though it’s designed for React, you can extend its capabilities to other frameworks within React’s ecosystem, like Next.js.

Creating and Styling Forms

React Hook Form is a popular library that provides a simple and declarative way to create, manage, and validate forms. By integrating Material UI’s UI components and styles, you can create good-looking forms that are easy to use, and apply a consistent design to your Next.js application.

To get started, scaffold a Next.js project locally. For the purpose of this guide, install the latest version of Next.js which makes use of the App directory.

npx create-next-app@latest next-project --app

Next, install these packages in your project:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Handling Form Validation

The form looks great, but it doesn’t do anything yet. To make it functional, you need to add some validation code. useForm hook utility functions will come in handy when managing and validating the user inputs. First, define the following state variable to manage the current form status, depending on whether a user has provided the correct credentials. Add this code inside the functional component:

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

Next, create a handler function to validate the credentials. This function will simulate an HTTP API request that typically occurs when client apps interact with a backend authentication API.

const onSubmit = (data) => {
  if (data.username === 'testuser' && data.password === 'password123') {
    setFormStatus({ success: true, error: '' });
  } else {
    setFormStatus({ success: false, error: 'Invalid username or password' });
  }
};

Add an onClick event handler function to the button component—passing it as a prop—to trigger the onSubmit function when a user clicks the submit button.

onClick={handleSubmit(onSubmit)}

To capture and validate user input, you can use the register function to register the form input fields, track its values, and specify the validation rules. This function takes several arguments, including the name of the input field and a validation parameters object. This object specifies the validation rules for the input field such as the specific pattern, and minimum length.

Awesome! With these changes, you should have a visually appealing, functional form made with React Hook Form and Material UI.

Enhance Your Next.js Development With Client-Side Libraries

Material UI and React Hook Form are just two examples of the many great client-side libraries that you can use to speed up Next.js frontend development. Client-side libraries provide a variety of production-ready features and pre-built components which can help you to build better front-end applications more quickly and efficiently.

Source: Build Stylish Next.js Forms With React Hook Form and Material UI