Need help with resolvers?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

react-hook-form
385 Stars 39 Forks MIT License 201 Commits 7 Opened issues

Description

📋 Validation resolvers: Zod, Yup, Joi, Superstruct, Vest, class-validator, io-ts, typanion, and nope.

Services available

!
?

Need anything else?

Contributors list

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

```typescript jsx 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(), }).required();

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

return (

console.log(d))}> ); }; ```

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 (

console.log(d))}> {errors.name?.message &&

{errors.name?.message}

} {errors.age?.message &&

{errors.age?.message}

} ); };

Superstruct

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

npm

```typescript jsx 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 (

console.log(d))}> ); }; ```

Joi

The most powerful data validation library for JS.

npm

```typescript jsx 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 (

console.log(d))}> ); }; ```

Vest

Vest 🦺 Declarative Validation Testing.

npm

```typescript jsx 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 (

console.log(data))}> ); }; ```

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({ resolver });

return (

console.log(data))}> {errors.username && {errors.username.message}} {errors.email && {errors.email.message}} ); };

io-ts

Validate your data with powerful decoders.

npm

```typescript jsx 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 (

console.log(d))}> ); };

export default App; ```

Nope

A small, simple, and fast JS validator

npm

```typescript jsx 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 (

console.log(d))}> ); }; ```

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 (

console.log(d))}> {errors.name?.message &&

{errors.name?.message}

} {errors.age?.message &&

{errors.age?.message}

} ); };

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 (

console.log(d))}> {errors.name?.message &&

{errors.name?.message}

} {errors.age?.message &&

{errors.age?.message}

} ); };

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.