Efficient way of building forms with React-Hook-Form
source link: https://dev.to/przpiw/efficient-way-of-building-forms-with-react-hook-form-jop
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
Enter fullscreen mode
Exit fullscreen mode
Project Setup
mkdir components && cd components && mkdir Form && cd Form && touch InputField.js && touch LoginForm.js
Enter fullscreen mode
Exit fullscreen mode
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>
</>
)
Enter fullscreen mode
Exit fullscreen mode
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: '[email protected]', 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>
</>
)
}
Enter fullscreen mode
Exit fullscreen mode
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK