/resolvers

📋 V6 - Validation resolvers: Yup, Joi, Superstruct and etc.

Primary LanguageTypeScript

React Hook Form Logo - React hook custom hook for form validation

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

npm downloads npm npm

Goal

We are moving away from native support for Yup validation. We are now supporting other schema validation after React Hook Form v6.

Install

$ npm install @hookform/resolvers

API

resolver(schema: object, config?: object)

type Required Description
schema object ✓ validation schema
config object validation schema configuration object

Quickstart

Dead simple Object schema validation.

npm

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers';
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 name="name" ref={register} />
      <input name="age" type="number" ref={register} />

      <input type="submit" />
    </form>
  );
};

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

npm

import React from 'react';
import { useForm } from 'react-hook-form';
import { superstructResolver } from '@hookform/resolvers';
import { struct } from 'superstruct';

const schema = struct({
  name: 'string',
  age: 'number',
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: superstructResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input name="name" ref={register} />
      <input name="age" type="number" ref={register} />

      <input type="submit" />
    </form>
  );
};

The most powerful data validation library for JS.

npm

import React from 'react';
import { useForm } from 'react-hook-form';
import { joiResolver } from '@hookform/resolvers';
import Joi from '@hapi/joi';

const schema = Joi.object({
  username: Joi.string().required(),
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: joiResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input name="name" ref={register} />
      <input name="age" type="number" ref={register} />

      <input type="submit" />
    </form>
  );
};

The most standard way to validate JSON (implemented by ajv)

npm

import React from 'react';
import { useForm } from 'react-hook-form';
import { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema';
import { jsonSchemaResolver } from '@hookform/resolvers';

type JSONSchema = JSONSchema4 | JSONSchema6 | JSONSchema7;

const schema: JSONSchema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      pattern: '[a-zA-Z]',
      minLength: 3,
    },
    age: {
      type: 'integer',
      minimum: 0,
    },
    email: {
      type: 'string',
      format: 'email',
    },
  },
};

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: jsonSchemaResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input name="name" ref={register} />
      <input name="age" type="number" ref={register} />
      <input name="email" type="email" ref={register} />

      <input type="submit" />
    </form>
  );
};

Backers

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

Backers

Organizations

Thanks goes to these wonderful organizations! [Contribute].

Contributor Organizations

Contributors

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

Contributors