{"_id":"@a-2-c-2-anpm/distinctio-laudantium-officiis","name":"@a-2-c-2-anpm/distinctio-laudantium-officiis","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@a-2-c-2-anpm/distinctio-laudantium-officiis","version":"1.0.0","description":"

\n

\n \n \"React\n \n

\n
\n\n

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

\n\n
\n\n[![npm downloads](https://img.shields.io/npm/dm/@hookform/resolvers.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/resolvers)\n[![npm](https://img.shields.io/npm/dt/@hookform/resolvers.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/resolvers)\n[![npm](https://img.shields.io/bundlephobia/minzip/@hookform/resolvers?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/resolvers)\n\n
\n\n## Install\n\n npm install @hookform/resolvers\n\n## Links\n\n- [React-hook-form validation resolver documentation ](https://react-hook-form.com/api/useform/#resolver)\n\n### Supported resolvers\n\n- [Install](#install)\n- [Links](#links)\n - [Supported resolvers](#supported-resolvers)\n- [API](#api)\n- [Quickstart](#quickstart)\n - [Yup](#yup)\n - [Zod](#zod)\n - [Superstruct](#superstruct)\n - [Joi](#joi)\n - [Vest](#vest)\n - [Class Validator](#class-validator)\n - [io-ts](#io-ts)\n - [Nope](#nope)\n - [computed-types](#computed-types)\n - [typanion](#typanion)\n - [Ajv](#ajv)\n - [TypeBox](#typebox)\n - [ArkType](#arktype)\n - [Valibot](#valibot)\n- [Backers](#backers)\n - [Sponsors](#sponsors)\n- [Contributors](#contributors)\n\n## API\n\n```\ntype Options = {\n mode: 'async' | 'sync',\n raw?: boolean\n}\n\nresolver(schema: object, schemaOptions?: object, resolverOptions: Options)\n```\n\n| | type | Required | Description |\n| --------------- | -------- | -------- | --------------------------------------------- |\n| schema | `object` | ✓ | validation schema |\n| schemaOptions | `object` | | validation library schema options |\n| resolverOptions | `object` | | resolver options, `async` is the default mode |\n\n## Quickstart\n\n### [Yup](https://github.com/jquense/yup)\n\nDead simple Object schema validation.\n\n[![npm](https://img.shields.io/bundlephobia/minzip/yup?style=for-the-badge)](https://bundlephobia.com/result?p=yup)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\n\nconst schema = yup\n .object()\n .shape({\n name: yup.string().required(),\n age: yup.number().required(),\n })\n .required();\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: yupResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n### [Zod](https://github.com/vriad/zod)\n\nTypeScript-first schema validation with static type inference\n\n[![npm](https://img.shields.io/bundlephobia/minzip/zod?style=for-the-badge)](https://bundlephobia.com/result?p=zod)\n\n> ⚠️ Example below uses the `valueAsNumber`, which requires `react-hook-form` v6.12.0 (released Nov 28, 2020) or later.\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as z from 'zod';\n\nconst schema = z.object({\n name: z.string().min(1, { message: 'Required' }),\n age: z.number().min(10),\n});\n\nconst App = () => {\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm({\n resolver: zodResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n {errors.name?.message &&

{errors.name?.message}

}\n \n {errors.age?.message &&

{errors.age?.message}

}\n \n
\n );\n};\n```\n\n### [Superstruct](https://github.com/ianstormtaylor/superstruct)\n\nA simple and composable way to validate data in JavaScript (or TypeScript).\n\n[![npm](https://img.shields.io/bundlephobia/minzip/superstruct?style=for-the-badge)](https://bundlephobia.com/result?p=superstruct)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { superstructResolver } from '@hookform/resolvers/superstruct';\nimport { object, string, number } from 'superstruct';\n\nconst schema = object({\n name: string(),\n age: number(),\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: superstructResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n### [Joi](https://github.com/sideway/joi)\n\nThe most powerful data validation library for JS.\n\n[![npm](https://img.shields.io/bundlephobia/minzip/joi?style=for-the-badge)](https://bundlephobia.com/result?p=joi)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { joiResolver } from '@hookform/resolvers/joi';\nimport Joi from 'joi';\n\nconst schema = Joi.object({\n name: Joi.string().required(),\n age: Joi.number().required(),\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: joiResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n### [Vest](https://github.com/ealush/vest)\n\nVest 🦺 Declarative Validation Testing.\n\n[![npm](https://img.shields.io/bundlephobia/minzip/vest?style=for-the-badge)](https://bundlephobia.com/result?p=vest)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { vestResolver } from '@hookform/resolvers/vest';\nimport { create, test, enforce } from 'vest';\n\nconst validationSuite = create((data = {}) => {\n test('username', 'Username is required', () => {\n enforce(data.username).isNotEmpty();\n });\n\n test('password', 'Password is required', () => {\n enforce(data.password).isNotEmpty();\n });\n});\n\nconst App = () => {\n const { register, handleSubmit, errors } = useForm({\n resolver: vestResolver(validationSuite),\n });\n\n return (\n
console.log(data))}>\n \n \n \n
\n );\n};\n```\n\n### [Class Validator](https://github.com/typestack/class-validator)\n\nDecorator-based property validation for classes.\n\n[![npm](https://img.shields.io/bundlephobia/minzip/class-validator?style=for-the-badge)](https://bundlephobia.com/result?p=class-validator)\n\n> ⚠️ Remember to add these options to your `tsconfig.json`!\n\n```\n\"strictPropertyInitialization\": false,\n\"experimentalDecorators\": true\n```\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { classValidatorResolver } from '@hookform/resolvers/class-validator';\nimport { Length, Min, IsEmail } from 'class-validator';\n\nclass User {\n @Length(2, 30)\n username: string;\n\n @IsEmail()\n email: string;\n}\n\nconst resolver = classValidatorResolver(User);\n\nconst App = () => {\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm({ resolver });\n\n return (\n
console.log(data))}>\n \n {errors.username && {errors.username.message}}\n \n {errors.email && {errors.email.message}}\n \n
\n );\n};\n```\n\n### [io-ts](https://github.com/gcanti/io-ts)\n\nValidate your data with powerful decoders.\n\n[![npm](https://img.shields.io/bundlephobia/minzip/io-ts?style=for-the-badge)](https://bundlephobia.com/result?p=io-ts)\n\n```typescript jsx\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { ioTsResolver } from '@hookform/resolvers/io-ts';\nimport t from 'io-ts';\n// you don't have to use io-ts-types, but it's very useful\nimport tt from 'io-ts-types';\n\nconst schema = t.type({\n username: t.string,\n age: tt.NumberFromString,\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: ioTsResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n\nexport default App;\n```\n\n### [Nope](https://github.com/bvego/nope-validator)\n\nA small, simple, and fast JS validator\n\n[![npm](https://img.shields.io/bundlephobia/minzip/nope-validator?style=for-the-badge)](https://bundlephobia.com/result?p=nope-validator)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { nopeResolver } from '@hookform/resolvers/nope';\nimport Nope from 'nope-validator';\n\nconst schema = Nope.object().shape({\n name: Nope.string().required(),\n age: Nope.number().required(),\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: nopeResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n### [computed-types](https://github.com/neuledge/computed-types)\n\nTypeScript-first schema validation with static type inference\n\n[![npm](https://img.shields.io/bundlephobia/minzip/computed-types?style=for-the-badge)](https://bundlephobia.com/result?p=computed-types)\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { computedTypesResolver } from '@hookform/resolvers/computed-types';\nimport Schema, { number, string } from 'computed-types';\n\nconst schema = Schema({\n username: string.min(1).error('username field is required'),\n age: number,\n});\n\nconst App = () => {\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm({\n resolver: computedTypesResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n {errors.name?.message &&

{errors.name?.message}

}\n \n {errors.age?.message &&

{errors.age?.message}

}\n \n
\n );\n};\n```\n\n### [typanion](https://github.com/arcanis/typanion)\n\nStatic and runtime type assertion library with no dependencies\n\n[![npm](https://img.shields.io/bundlephobia/minzip/typanion?style=for-the-badge)](https://bundlephobia.com/result?p=typanion)\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { typanionResolver } from '@hookform/resolvers/typanion';\nimport * as t from 'typanion';\n\nconst isUser = t.isObject({\n username: t.applyCascade(t.isString(), [t.hasMinLength(1)]),\n age: t.applyCascade(t.isNumber(), [\n t.isInteger(),\n t.isInInclusiveRange(1, 100),\n ]),\n});\n\nconst App = () => {\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm({\n resolver: typanionResolver(isUser),\n });\n\n return (\n
console.log(d))}>\n \n {errors.name?.message &&

{errors.name?.message}

}\n \n {errors.age?.message &&

{errors.age?.message}

}\n \n
\n );\n};\n```\n\n### [Ajv](https://github.com/ajv-validator/ajv)\n\nThe fastest JSON validator for Node.js and browser\n\n[![npm](https://img.shields.io/bundlephobia/minzip/ajv?style=for-the-badge)](https://bundlephobia.com/result?p=ajv)\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { ajvResolver } from '@hookform/resolvers/ajv';\n\n// must use `minLength: 1` to implement required field\nconst schema = {\n type: 'object',\n properties: {\n username: {\n type: 'string',\n minLength: 1,\n errorMessage: { minLength: 'username field is required' },\n },\n password: {\n type: 'string',\n minLength: 1,\n errorMessage: { minLength: 'password field is required' },\n },\n },\n required: ['username', 'password'],\n additionalProperties: false,\n};\n\nconst App = () => {\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm({\n resolver: ajvResolver(schema),\n });\n\n return (\n
console.log(data))}>\n \n {errors.username && {errors.username.message}}\n \n {errors.password && {errors.password.message}}\n \n
\n );\n};\n```\n\n### [TypeBox](https://github.com/sinclairzx81/typebox)\n\nJSON Schema Type Builder with Static Type Resolution for TypeScript\n\n[![npm](https://img.shields.io/bundlephobia/minzip/@sinclair/typebox?style=for-the-badge)](https://bundlephobia.com/result?p=@sinclair/typebox)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { typeboxResolver } from '@hookform/resolvers/typebox';\nimport { Type } from '@sinclair/typebox';\n\nconst schema = Type.Object({\n username: Type.String({ minLength: 1 }),\n password: Type.String({ minLength: 1 }),\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: typeboxResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n### [ArkType](https://github.com/arktypeio/arktype)\n\nTypeScript's 1:1 validator, optimized from editor to runtime\n\n[![npm](https://img.shields.io/bundlephobia/minzip/arktype?style=for-the-badge)](https://bundlephobia.com/result?p=arktype)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { arktypeResolver } from '@hookform/resolvers/arktype';\nimport { type } from 'arktype';\n\nconst schema = type({\n username: 'string>1',\n password: 'string>1',\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: arktypeResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n### [Valibot](https://github.com/fabian-hiller/valibot)\n\nThe modular and type safe schema library for validating structural data\n\n[![npm](https://img.shields.io/bundlephobia/minzip/valibot?style=for-the-badge)](https://bundlephobia.com/result?p=valibot)\n\n```typescript jsx\nimport { useForm } from 'react-hook-form';\nimport { valibotResolver } from '@hookform/resolvers/valibot';\nimport { object, string, minLength, endsWith } from 'valibot';\n\nconst schema = object({\n username: string('username is required', [\n minLength(3, 'Needs to be at least 3 characters'),\n endsWith('cool', 'Needs to end with `cool`'),\n ]),\n password: string('password is required'),\n});\n\nconst App = () => {\n const { register, handleSubmit } = useForm({\n resolver: valibotResolver(schema),\n });\n\n return (\n
console.log(d))}>\n \n \n \n
\n );\n};\n```\n\n## Backers\n\nThanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].\n\n\n \n\n\n### Sponsors\n\nThanks go to these kind and lovely sponsors!\n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n## Contributors\n\nThanks goes to these wonderful people! [[Become a contributor](CONTRIBUTING.md)].\n\n\n \n\n","readmeFilename":"README.md"}