DOCSEARCHbyAlgolia
Submit Docs

React Hook Form

repository·master·Indexed 13 days ago

https://github.com/react-hook-form/react-hook-form

A performant, flexible, and extensible forms library for React Hooks and React Native. Version 7.85.0 focuses on minimizing re-renders by leveraging uncontrolled components and native HTML validation. It features zero dependencies, a small bundle size, and supports schema validation via resolvers for libraries such as Zod, Yup, Joi, AJV, and Superstruct. Key API features include the useForm hook, register, handleSubmit, and the Controller component for UI library integration.

Tokens
20.5K
Snippets
76
Records
92
Agent score
96%

What's inside React Hook Form

  1. Overview of React Hook Form features

    master

    React Hook Form is a performant, flexible, and extensible form validation library for React. Key features include:

    • Performance: Built with performance and developer experience in mind, supporting uncontrolled component validation to reduce re-renders.
    • Low Overhead: Zero dependencies and low bundle size.
    • Standard Compliance: Follows standard HTML validation rules and supports native browser validation.
    • Compatibility: Works with React Native.
    • Schema Validation: Supports external schema validation libraries like Yup, Joi, and Superstruct, or custom validation logic.
    • Tooling: Includes a form builder for rapid development.

  2. Key features of React Hook Form

    master

    React Hook Form provides several advantages for form management:

    • Performance and DX: Built with performance and Developer Experience in mind.
    • Uncontrolled Validation: Supports uncontrolled component validation to reduce re-renders.
    • Controlled Component Support: Improves performance even when using controlled components.
    • Tiny Size: Small footprint with zero dependencies.
    • HTML Standard: Follows standard HTML validation rules.
    • Compatibility: Works with React Native.
    • Schema Validation: Supports schema-based validation using Yup.
    • Native Browser Validation: Supports native browser validation.
    • Form Builder: Allows for rapid form creation via a form builder.

  3. Core features of React Hook Form

    master

    React Hook Form is designed for performance and developer experience (DX). Key features include:

    • Uncontrolled Validation: Focuses on performance by leveraging uncontrolled components.
    • Controlled Component Optimization: Improves performance when using controlled forms.
    • Tiny Size: Zero dependencies and a very small footprint.
    • HTML Standards: Follows standard HTML validation rules.
    • Compatibility: Works with React Native.
    • Schema Validation Support: Compatible with Yup, Joi, Superstruct, and custom validation implementations.
    • Native Browser Validation: Supports native browser validation capabilities.
    • Form Builder: Allows for rapid form creation via a visual builder.

  4. React Hook Form Features

    master

    React Hook Form is designed with the following characteristics:

    • Performance, UX, and DX: Optimized for minimal re-renders and a smooth developer experience.
    • Native HTML Validation: Embraces standard HTML validation patterns.
    • UI Library Integration: Provides out-of-the-box integration with various UI libraries (e.g., via the Controller component).
    • Zero Dependencies: Small package size with no external dependencies.
    • Schema Validation Support: Supports popular validation libraries through resolvers, including:
      • Yup
      • Zod
      • AJV
      • Superstruct
      • Joi

  5. React Hook Form Overview and Features

    master

    React Hook Form is a library designed for high performance and excellent UX/DX in React forms.

    Key features include:

    • Uncontrolled components: Built around uncontrolled form validation for better performance.
    • Zero dependencies: A small bundle size with no external dependencies.
    • UI Library Integration: Easily integrates with existing UI libraries.
    • Native Validation: Supports browser-native validation.
    • Schema Support: Supports various schema validation libraries including Yup, Zod, Superstruct, Joi, Vest, class-validator, io-ts, and nope, as well as custom validation logic.

  6. React Hook Form Features and Schema Support

    master

    React Hook Form is designed for performance, UX, and DX. Key features include:

    • Native HTML form validation support.
    • Out-of-the-box integration with UI libraries.
    • Small bundle size with zero dependencies.

    It also supports various schema validation libraries:

    • Yup
    • Zod
    • AJV
    • Superstruct
    • Joi
    • Vest
    • class-validator
    • io-ts
    • nope
    • Custom builds

  7. Configure custom validation with Resolvers

    master

    A Resolver is a function used to perform schema-based or external validation (like Zod, Yup, or Joi). It takes the current form values and returns a ResolverResult, which is either a ResolverSuccess (containing transformed values) or a ResolverError (containing field errors).

    type Resolver<TFieldValues, TContext, TTransformedValues> = (
  values: TFieldValues,
  context: TContext | undefined,
  options: ResolverOptions<TFieldValues>
) => Promise<ResolverResult<TFieldValues, TTransformedValues>> | ResolverResult<TFieldValues, TTransformedValues>;

  8. Understand FieldError and FieldErrors types

    master

    React Hook Form uses specific types to represent validation errors:

    • FieldError: Represents an error on a specific field. It contains a type (the validation rule that failed), an optional message, an optional ref to the element, and an optional root error for errors that occur at the root level.
    • FieldErrors<T>: A nested object structure that mirrors your form values, where each leaf node is a FieldError. It also includes special keys for root and form level errors.

  9. Quickstart with useForm

    master

    You can get started by using the useForm hook. This hook provides methods to register inputs, handle form submission, and access the current form state (including errors).

    Key components used in the example:

    • register: Connects an input field to the library.
    • handleSubmit: A wrapper function that manages the submission process and validation.
    • formState.errors: An object containing validation errors for each field.

    Example usage:

    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')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter a number for age.</p>}
      <input type="submit" />
    </form>
  );
}

  12. Web usage examples for React Hook Form

    master

    The following CodeSandbox links provide live, interactive examples of various React Hook Form implementation patterns for web applications:

    Core Functionality

    Advanced Layouts & Components