Next.js React-hook-form Tutorial
Next.js React-hook-form is a very popular library to create forms in React & Next.js. Let's take a look at how we an leverage & implement react-hook-form.
Next.js React-Hook-Form
- React-hook-from is an interesting library since it helps us to manage complex forms. The official React-Hook-Form page they state it's performant; flexible & extensible forms with easy-to-use validation & I agree with that which is why I choose to use it. In this steps I am going to also use Zod as validation. We will install these 3 packages: react-hook-form hookform/resolvers zod.
Summaryof setting up react-hook-form in Next.js includes the following:
1. Add the react-hook-form package
2. Import useForm from react-hook-form
3. Define our schema for Zod validation & the Type of the form fields
4. Custom hook useForm
5. Register function
6. Custom onSubmit Function & handleSubmit function
7. Display errors
8. Utilize isSubmitting for async function
Details of setting up next-auth in Next.js includes the following:
1. Install the react-hook-form package
To install react-hook-form we add the package.1npm install react-hook-formAlso at the top we need to add 'use client'.2. Import useForm from react-hook-form
We simply import the hook at the top of the file:1import { SubmitHandler, useForm } from 'react-hook-form'; 2 import { z } from 'zod'; 3import { zodResolver } from '@hookform/resolvers/zod';While we are doing this lets also import the SubmitHandler function & Zod
3. Define our schema for Zod validation & the Type of the form fields
In typescript we have to define our a type of the form fields. With Zod we obviously need to have that installed & imported at the top.1const schema = z.object({ 2 email: z.string().min(3), 3 password: z.string().min(3), 4}); 5type FormFields = z.infer<typeof schema>;4. Custom hook useForm
We will make use of the custom hook useForm:1const { 2 register, 3 handleSubmit, 4 setError, 5 formState: { errors, isSubmitting, isSubmitSuccessful }, 6} = useForm<FormFields>({ 7 defaultValues: { 8 email: 'email ... ', 9 }, 10 resolver: zodResolver(schema), 11}); 125. Make use of Register function
We register each input field so that each input fields are registered and when we change the values it gets sent to the form.1<input{...register('email')}6. Custom onSubmit function in typescript & implement handleSubmit function
We will create a custom onSubmit function which will utilize SubmitHandler imported from react-hook-form. Then in our form element we will use onSubmit attribute & call the handleSubmit function:1const onSubmit: SubmitHandler<FormFields> = async (data) => { 2 console.log("data === ", data); 3 //do stuff 4} 5 6<form onSubmit={handleSubmit(onSubmit)}>7. Access formState and error object
We will show errors so below each input field we will add the error.field_name.message:1{errors.email && ( 2<div>{errors.email.message}</div> 3)}8. Utilize isSubmitting for async function to display feedback to user.
Utilize isSubmitting for async function to display feedback to user.1<button disabled={isSubmitting}
So as we see we are able to use react hook forms to build some really great forms while adding validation with zod.