react-hook-form

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>
  );
}