This content originally appeared on DEV Community and was authored by Damian Piwowarczyk
Building reusable forms can be sometimes challenging. In this tutorial, I will demonstrate how we can build reusable form components with the implementation of react useForHook.
We will use next.js boilerplate for this example.
React Hook Form
React Hook Form adopts the use of uncontrolled inputs using ref instead of depending on the state to control the inputs. This approach makes the forms more performant and reduces the number of re-renders.
The package is small in size and has zero dependencies. The API is well documented and provides a seamless experience to developers when working with forms. React Hook Form follows HTML standards for validating the forms using constraint-based validation API.
Create next.js project
npx create-next-app nextjs-useformhook &&
cd nextjs-useformhook && npm i react-hook-form
Project Setup
mkdir components && cd components && mkdir Form && cd Form && touch InputField.js && touch LoginForm.js
First, we will start with creating InputField component with some props and register function that will allow applying validation rules to our input element.
export const InputField = ({ label, register, type, error }) => (
<>
<label>{label}</label>
<input
style={{ background: 'gray' }}
type={type}
{...register(label)}
></input>
<p>{error}</p>
</>
)
Now we will look at implementing out LoginForm where we can reuse our InputField component.
import { useForm } from 'react-hook-form'
import { InputField } from './InputField'
export const LoginForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
// This will contain all form data once submit button is clicked.
const onSubmit = (data) => {
console.log(data)
// {Email: 'John@example.com', Password: 'secret'}
}
register('Email', { required: { value: true, message: 'Email is required' } })
register('Password', {
required: { value: true, message: 'Password is required' },
})
return (
<>
<form id='loginForm' onSubmit={handleSubmit(onSubmit)}>
<InputField
label='Email'
type='email'
register={register}
error={errors.Email?.message}
/>
<InputField
label='Password'
type='password'
register={register}
error={errors.Password?.message}
/>
</form>
<button style={{ background: '#5757ff' }} type='submit' form='loginForm'>
Login
</button>
</>
)
}
To sum up, why use react-form-hook ?
React form hook can help save us time when creating complex forms, increase our application performance by preventing unnecessary re-renderings, and help to manage validation.
This content originally appeared on DEV Community and was authored by Damian Piwowarczyk
Damian Piwowarczyk | Sciencx (2021-12-14T05:53:07+00:00) Efficient way of building forms with React-Hook-Form. Retrieved from https://www.scien.cx/2021/12/14/efficient-way-of-building-forms-with-react-hook-form/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.