Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@hookform/resolvers
Advanced tools
React Hook Form validation resolvers: Yup, Joi, Superstruct and etc.
The @hookform/resolvers package is used in conjunction with React Hook Form to integrate external validation libraries. It provides resolvers that allow you to use your preferred validation schema with React Hook Form, ensuring that form data adheres to certain rules before it is processed or submitted.
Yup Resolver
Integrates Yup validation schema with React Hook Form.
{"import { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\n\nconst schema = yup.object().shape({\n name: yup.string().required(),\n age: yup.number().positive().integer().required(),\n});\n\nconst { register, handleSubmit, errors } = useForm({\n resolver: yupResolver(schema)\n});\n\n// In your form...\n<input name='name' ref={register} />\n<p>{errors.name?.message}</p>\n<input name='age' ref={register} />\n<p>{errors.age?.message}</p>"}
Joi Resolver
Integrates Joi validation schema with React Hook Form.
{"import { joiResolver } from '@hookform/resolvers/joi';\nimport Joi from 'joi';\n\nconst schema = Joi.object({\n username: Joi.string().alphanum().min(3).max(30).required(),\n password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),\n});\n\nconst { register, handleSubmit, errors } = useForm({\n resolver: joiResolver(schema)\n});\n\n// In your form...\n<input name='username' ref={register} />\n<p>{errors.username?.message}</p>\n<input name='password' ref={register} />\n<p>{errors.password?.message}</p>"}
Zod Resolver
Integrates Zod validation schema with React Hook Form.
{"import { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\n\nconst schema = z.object({\n firstName: z.string().min(1, { message: 'First name is required' }),\n age: z.number().min(10, { message: 'Minimum age is 10' }),\n});\n\nconst { register, handleSubmit, errors } = useForm({\n resolver: zodResolver(schema)\n});\n\n// In your form...\n<input name='firstName' ref={register} />\n<p>{errors.firstName?.message}</p>\n<input name='age' ref={register} />\n<p>{errors.age?.message}</p>"}
React Hook Form is the core library that @hookform/resolvers is designed to work with. It provides a way to manage forms with minimal re-rendering, but it does not include built-in schema-based validation. @hookform/resolvers complements it by adding this capability.
Formik is another popular form management library for React. It handles form state, validation, and submission. Unlike React Hook Form, Formik includes built-in support for Yup validation without needing an additional resolver package.
Redux Form is a form library that works with Redux for state management. It includes validation functionalities but is generally considered heavier and more complex than React Hook Form and requires Redux to be part of the project.
Performant, flexible and extensible forms with easy to use validation.
We are moving away from native support for Yup validation. We are now supporting other schema validation after React Hook Form v6.
$ npm install @hookform/resolvers
resolver(schema: object, config?: object)
type | Required | Description | |
---|---|---|---|
schema | object | ✓ | validation schema |
config | object | validation schema configuration object |
Dead simple Object schema validation.
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).
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.
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)
import React from 'react';
import { useForm } from 'react-hook-form';
import { JSONSchema, jsonSchemaResolver } from '@hookform/resolvers';
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>
);
};
Thanks goes to all our backers! [Become a backer].
Thanks goes to these wonderful organizations! [Contribute].
Thanks goes to these wonderful people! [Become a contributor].
FAQs
React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types, TypeBox, arktype, Typanion, Effect-TS and VineJS
The npm package @hookform/resolvers receives a total of 3,142,605 weekly downloads. As such, @hookform/resolvers popularity was classified as popular.
We found that @hookform/resolvers demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.