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

Readme

Source

React hook form management without the hassle

Super easy to create forms and integrate
Build with React hook, performance and developer experience in mind
Follow html standard for validation
Tiny size without other dependency 2 kB (minified + gzipped)
Build a quick form with form builder

Install

$ npm install react-forme

Website

Quickstart

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

function App() {
    const { register, handleSubmit, errors } = useForm();
    const onSubmit = (data) => { console.log(data); }
    console.log(errors);
    
    return <form onSubmit={handleSubmit(onSubmit}>
        <input name="firstname" ref={(ref) => register({ ref, required: true })} />
        <input name="lastname" ref={(ref) => register({ ref, pattern: "[a-z]{1,15}" })} />
        <input type="submit" />
    </form>
}

FAQs

What is react-hook-form?

Is react-hook-form well maintained?

Last updated on 21 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install