@hookform/resolvers
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.1 • Public • Published

    Performant, flexible and extensible forms with easy to use validation.

    npm downloads npm npm

    Install

    $ npm install @hookform/resolvers
    

    Links

    API

    resolver(schema: object, schemaOptions?: object, resolverOptions: { mode: 'async' | 'sync' })

    type Required Description
    schema object validation schema
    schemaOptions object validation library schema options
    resolverOptions object resolver options, async is the default mode

    Quickstart

    Yup

    Dead simple Object schema validation.

    npm

    import { useForm } from 'react-hook-form';
    import { yupResolver } from '@hookform/resolvers/yup';
    import * as yup from 'yup';
    
    const schema = yup.object().shape({
      name: yup.string().required(),
      age: yup.number().required(),
    });
    
    const App = () => {
      const { register, handleSubmit } = useForm({
        resolver: yupResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          <input type="number" {...register('age')} />
          <input type="submit" />
        </form>
      );
    };

    Zod

    TypeScript-first schema validation with static type inference

    npm

    ⚠️ Example below uses the valueAsNumber, which requires react-hook-form v6.12.0 (released Nov 28, 2020) or later.

    import { useForm } from 'react-hook-form';
    import { zodResolver } from '@hookform/resolvers/zod';
    import * as z from 'zod';
    
    const schema = z.object({
      name: z.string().nonempty({ message: 'Required' }),
      age: z.number().min(10),
    });
    
    const App = () => {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm({
        resolver: zodResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          {errors.name?.message && <p>{errors.name?.message}</p>}
          <input type="number" {...register('age', { valueAsNumber: true })} />
          {errors.age?.message && <p>{errors.age?.message}</p>}
          <input type="submit" />
        </form>
      );
    };

    Superstruct

    A simple and composable way to validate data in JavaScript (or TypeScript).

    npm

    import { useForm } from 'react-hook-form';
    import { superstructResolver } from '@hookform/resolvers/superstruct';
    import { object, string, number } from 'superstruct';
    
    const schema = object({
      name: string(),
      age: number(),
    });
    
    const App = () => {
      const { register, handleSubmit } = useForm({
        resolver: superstructResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          <input type="number" {...register('age', { valueAsNumber: true })} />
          <input type="submit" />
        </form>
      );
    };

    Joi

    The most powerful data validation library for JS.

    npm

    import { useForm } from 'react-hook-form';
    import { joiResolver } from '@hookform/resolvers/joi';
    import Joi from 'joi';
    
    const schema = Joi.object({
      name: Joi.string().required(),
      age: Joi.number().required(),
    });
    
    const App = () => {
      const { register, handleSubmit } = useForm({
        resolver: joiResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          <input type="number" {...register('age')} />
          <input type="submit" />
        </form>
      );
    };

    Vest

    Vest 🦺 Declarative Validation Testing.

    npm

    import { useForm } from 'react-hook-form';
    import { vestResolver } from '@hookform/resolvers/vest';
    import vest, { test, enforce } from 'vest';
    
    const validationSuite = vest.create((data = {}) => {
      test('username', 'Username is required', () => {
        enforce(data.username).isNotEmpty();
      });
    
      test('password', 'Password is required', () => {
        enforce(data.password).isNotEmpty();
      });
    });
    
    const App = () => {
      const { register, handleSubmit, errors } = useForm({
        resolver: vestResolver(validationSuite),
      });
    
      return (
        <form onSubmit={handleSubmit((data) => console.log(data))}>
          <input {...register('username')} />
          <input type="password" {...register('password')} />
          <input type="submit" />
        </form>
      );
    };

    Class Validator

    Decorator-based property validation for classes.

    npm

    ⚠️ Remember to add these options to your tsconfig.json!

    "strictPropertyInitialization": false,
    "experimentalDecorators": true
    
    import { useForm } from 'react-hook-form';
    import { classValidatorResolver } from '@hookform/resolvers/class-validator';
    import { Length, Min, IsEmail } from 'class-validator';
    
    class User {
      @Length(2, 30)
      username: string;
    
      @IsEmail()
      email: string;
    }
    
    const resolver = classValidatorResolver(User);
    
    const App = () => {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm<User>({ resolver });
    
      return (
        <form onSubmit={handleSubmit((data) => console.log(data))}>
          <input type="text" {...register('username')} />
          {errors.username && <span>{errors.username.message}</span>}
          <input type="text" {...register('email')} />
          {errors.email && <span>{errors.email.message}</span>}
          <input type="submit" value="Submit" />
        </form>
      );
    };

    io-ts

    Validate your data with powerful decoders.

    npm

    import React from 'react';
    import { useForm } from 'react-hook-form';
    import { ioTsResolver } from '@hookform/resolvers/io-ts';
    import t from 'io-ts';
    // you don't have to use io-ts-types but it's very useful
    import tt from 'io-ts-types';
    
    const schema = t.type({
      username: t.string,
      age: tt.NumberFromString,
    });
    
    const App = () => {
      const { register, handleSubmit } = useForm({
        resolver: ioTsResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('username')} />
          <input type="number" {...register('age')} />
          <input type="submit" />
        </form>
      );
    };
    
    export default App;

    Nope

    A small, simple, and fast JS validator

    npm

    import { useForm } from 'react-hook-form';
    import { nopeResolver } from '@hookform/resolvers/nope';
    import Nope from 'nope-validator';
    
    const schema = Nope.object().shape({
      name: Nope.string().required(),
      age: Nope.number().required(),
    });
    
    const App = () => {
      const { register, handleSubmit } = useForm({
        resolver: nopeResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          <input type="number" {...register('age')} />
          <input type="submit" />
        </form>
      );
    };

    computed-types

    TypeScript-first schema validation with static type inference

    npm

    import { useForm } from 'react-hook-form';
    import { computedTypesResolver } from '@hookform/resolvers/computed-types';
    import Schema, { number, string } from 'computed-types';
    
    const schema = Schema({
      username: string.min(1).error('username field is required'),
      age: number,
    });
    
    const App = () => {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm({
        resolver: computedTypesResolver(schema),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          {errors.name?.message && <p>{errors.name?.message}</p>}
          <input type="number" {...register('age', { valueAsNumber: true })} />
          {errors.age?.message && <p>{errors.age?.message}</p>}
          <input type="submit" />
        </form>
      );
    };

    typanion

    Static and runtime type assertion library with no dependencies

    npm

    import { useForm } from 'react-hook-form';
    import { typanionResolver } from '@hookform/resolvers/typanion';
    import * as t from 'typanion';
    
    const isUser = t.isObject({
      username: t.applyCascade(t.isString(), [t.hasMinLength(1)]),
      age: t.applyCascade(t.isNumber(), [
        t.isInteger(),
        t.isInInclusiveRange(1, 100),
      ]),
    });
    
    const App = () => {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm({
        resolver: typanionResolver(isUser),
      });
    
      return (
        <form onSubmit={handleSubmit((d) => console.log(d))}>
          <input {...register('name')} />
          {errors.name?.message && <p>{errors.name?.message}</p>}
          <input type="number" {...register('age')} />
          {errors.age?.message && <p>{errors.age?.message}</p>}
          <input type="submit" />
        </form>
      );
    };

    Backers

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

    Organizations

    Thanks goes to these wonderful organizations! [Contribute].

    Contributors

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

    Install

    npm i @hookform/resolvers

    DownloadsWeekly Downloads

    317,667

    Version

    2.8.1

    License

    MIT

    Unpacked Size

    375 kB

    Total Files

    227

    Last publish

    Collaborators

    • bluebill1049
    • kotarella1110
    • jorisre