Goal

We are moving away from native support for Yup validation and begin to support others 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

Yup

Dead simple Object schema validation.

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers';
import yup as * 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>
  );
};

Superstruct

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

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

Joi

The most powerful data validation library for JS.

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

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].