react-hook-form

What is react-hook-form?

The react-hook-form npm package is a flexible and performant library that simplifies the process of working with forms in React applications. It provides hooks and components to manage form state and validation with minimal re-renders.

What are react-hook-form's main functionalities?

Easy Form State Management

This feature allows you to easily manage form state, handle form submissions, and integrate form validation.

import React from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name='example' defaultValue='test' ref={register} />
      <input name='exampleRequired' ref={register({ required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}
      <input type='submit' />
    </form>
  );
}

Form Validation

This feature provides built-in validation methods and allows you to create custom validation rules for your form inputs.

import React from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name='example' ref={register({ required: 'This is required' })} />
      {errors.example && <p>{errors.example.message}</p>}
      <input type='submit' />
    </form>
  );
}

Integrating with UI Libraries

This feature allows you to easily integrate react-hook-form with other UI libraries like react-select, material-ui, and antd.

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';

function MyForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        as={Select}
        options={[{ value: 'chocolate', label: 'Chocolate' }]}
        name='ReactSelect'
        isClearable
        control={control}
        rules={{ required: true }}
      />
      <input type='submit' />
    </form>
  );
}

Other packages similar to react-hook-form

formik

Formik is another popular form library for React. It is known for its simplicity and support for complex form logic. Compared to react-hook-form, Formik may have a slightly larger bundle size and potentially more re-renders, but it offers a more declarative API and built-in helpers for managing form state.

redux-form

Redux-form integrates form state into the Redux store, providing deep integration with Redux. It is suitable for complex form handling in large-scale applications. However, it can be overkill for simple forms and may lead to more boilerplate compared to react-hook-form, which is more lightweight and requires less setup.

final-form

Final Form is a subscription-based form state management library that separates form state from the UI layer. It is framework-agnostic and can be used with React via react-final-form. It offers fine-grained control over form rendering, but react-hook-form tends to have better performance due to its use of uncontrolled components.

README

Get started | API | Form Builder | FAQs | Examples

Features

• Built with performance, UX and DX in mind
• Embraces native HTML form validation
• Out of the box integration with UI libraries
• Small size and no dependencies
• Support Yup, Zod, AJV, Superstruct, Joi and others

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Sponsors

Thanks go to these kind and lovely sponsors!

Past sponsors

Backers

Thanks go to all our backers! [Become a backer].

Contributors

Thanks go to these wonderful people! [Become a contributor].

Changelog

[7.54.0] - 2024-12-09

Changed

• useForm return methods will be memorized based formState update