B-Esmaili/react-hook-form

React Hook Form video - React custom hook for form validation

Features

Built with performance, UX and DX in mind
Embraces native form validation
Out of the box integration with UI libraries
Small size and no dependencies
Follows HTML standard for validation
Support Yup, Zod, Superstruct, Joi, Vest, class-validator, io-ts, nope or custom

Install

npm install react-hook-form

Links

Quickstart

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} /> {/* register an input */}
      <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>
  );
}