@dudeofawesome/hookform-resolvers

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

Install

npm install @hookform/resolvers

Links

- React-hook-form validation resolver documentation

$3

- Install
- Links
- Supported resolvers
- API
- Quickstart
- Yup
- Zod
- Superstruct
- Joi
- Vest
- Class Validator
- io-ts
- Nope
- computed-types
- typanion
- Ajv
- TypeBox
- With ValueCheck
- With TypeCompiler
- ArkType
- Valibot
- TypeSchema
- effect-ts
- VineJS
- fluentvalidation-ts
- Backers
- Sponsors
- Contributors

API

``
type Options = {
mode: 'async' | 'sync',
raw?: boolean
}

resolver(schema: object, schemaOptions?: object, resolverOptions: Options)
`

| | type | Required | Description |
| --------------- | -------- | -------- | --------------------------------------------- |
| schema | object | ✓ | validation schema |
| schemaOptions | object | | validation library schema options |
| resolverOptions | object | | resolver options, async is the default mode |

Quickstart

$3

Dead simple Object schema validation.

![npm](https://bundlephobia.com/result?p=yup)

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




);
};


`

$3

TypeScript-first schema validation with static type inference


> ⚠️ Example below uses the valueAsNumber, which requires react-hook-form v6.12.0 (released Nov 28, 2020) or later.

`tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
name: z.string().min(1, { 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}

}


);
};

`

$3

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


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




);
};


`

$3

The most powerful data validation library for JS.


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




);
};


`

$3

Vest 🦺 Declarative Validation Testing.


`typescript jsx
import { useForm } from 'react-hook-form';
import { vestResolver } from '@hookform/resolvers/vest';
import { create, test, enforce } from 'vest';

const validationSuite = 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))}>




);
};


`

$3

Decorator-based property validation for classes.


> ⚠️ Remember to add these options to your tsconfig.json!

`
"strictPropertyInitialization": false,
"experimentalDecorators": true
`

`tsx
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}}


);
};


`

$3

Validate your data with powerful decoders.


`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;
`

$3

A small, simple, and fast JS validator

![npm](https://bundlephobia.com/result?p=nope-validator)

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




);
};


`

$3

TypeScript-first schema validation with static type inference


`tsx
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}

}


);
};

`

$3

Static and runtime type assertion library with no dependencies


`tsx
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}

}


);
};

`

$3

The fastest JSON validator for Node.js and browser


`tsx
import { useForm } from 'react-hook-form';
import { ajvResolver } from '@hookform/resolvers/ajv';

// must use minLength: 1 to implement required field
const schema = {
type: 'object',
properties: {
username: {
type: 'string',
minLength: 1,
errorMessage: { minLength: 'username field is required' },
},
password: {
type: 'string',
minLength: 1,
errorMessage: { minLength: 'password field is required' },
},
},
required: ['username', 'password'],
additionalProperties: false,
};

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

return (


console.log(data))}>

{errors.username && {errors.username.message}}

{errors.password && {errors.password.message}}
submit

);
};


`

$3

JSON Schema Type Builder with Static Type Resolution for TypeScript


#### With ValueCheck

`typescript jsx
import { useForm } from 'react-hook-form';
import { typeboxResolver } from '@hookform/resolvers/typebox';
import { Type } from '@sinclair/typebox';

const schema = Type.Object({
username: Type.String({ minLength: 1 }),
password: Type.String({ minLength: 1 }),
});

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

return (


console.log(d))}>




);
};


`

#### With TypeCompiler

A high-performance JIT of TypeBox, read more

`typescript jsx
import { useForm } from 'react-hook-form';
import { typeboxResolver } from '@hookform/resolvers/typebox';
import { Type } from '@sinclair/typebox';
import { TypeCompiler } from '@sinclair/typebox/compiler';

const schema = Type.Object({
username: Type.String({ minLength: 1 }),
password: Type.String({ minLength: 1 }),
});

const typecheck = TypeCompiler.Compile(schema);

const App = () => {
const { register, handleSubmit } = useForm({
resolver: typeboxResolver(typecheck),
});

return (


console.log(d))}>




);
};


`

$3

TypeScript's 1:1 validator, optimized from editor to runtime


`typescript jsx
import { useForm } from 'react-hook-form';
import { arktypeResolver } from '@hookform/resolvers/arktype';
import { type } from 'arktype';

const schema = type({
username: 'string>1',
password: 'string>1',
});

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

return (


console.log(d))}>




);
};


`

$3

The modular and type safe schema library for validating structural data


`typescript jsx
import { useForm } from 'react-hook-form';
import { valibotResolver } from '@hookform/resolvers/valibot';
import * as v from 'valibot';

const schema = v.object({
username: v.pipe(
v.string('username is required'),
v.minLength(3, 'Needs to be at least 3 characters'),
v.endsWith('cool', 'Needs to end with cool'),
),
password: v.string('password is required'),
});

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

return (


console.log(d))}>




);
};


`

$3

Universal adapter for schema validation, compatible with any validation library


`typescript jsx
import { useForm } from 'react-hook-form';
import { typeschemaResolver } from '@hookform/resolvers/typeschema';
import * as z from 'zod';

// Use your favorite validation library
const schema = z.object({
username: z.string().min(1, { message: 'Required' }),
password: z.number().min(1, { message: 'Required' }),
});

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

return (


console.log(d))}>




);
};


`

$3

A powerful TypeScript framework that provides a fully-fledged functional effect system with a rich standard library.


`typescript jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { effectTsResolver } from '@hookform/resolvers/effect-ts';
import { Schema } from 'effect';

const schema = Schema.Struct({
username: Schema.String.pipe(
Schema.nonEmpty({ message: () => 'username required' }),
),
password: Schema.String.pipe(
Schema.nonEmpty({ message: () => 'password required' }),
),
});

type FormData = Schema.Schema.Type;

interface Props {
onSubmit: (data: FormData) => void;
}

function TestComponent({ onSubmit }: Props) {
const {
register,
handleSubmit,
formState: { errors },
// provide generic if TS has issues inferring types
} = useForm({
resolver: effectTsResolver(schema),
});

return (


{errors.username && {errors.username.message}}

{errors.password && {errors.password.message}}

submit

);
}

`

$3

VineJS is a form data validation library for Node.js


`typescript jsx
import { useForm } from 'react-hook-form';
import { vineResolver } from '@hookform/resolvers/vine';
import vine from '@vinejs/vine';

const schema = vine.compile(
vine.object({
username: vine.string().minLength(1),
password: vine.string().minLength(1),
}),
);

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

return (


console.log(d))}>

{errors.username && {errors.username.message}}

{errors.password && {errors.password.message}}
submit

);
};


`

$3

A TypeScript-first library for building strongly-typed validation rules


`typescript jsx
import { useForm } from 'react-hook-form';
import { fluentValidationResolver } from '@hookform/resolvers/fluentvalidation-ts';
import { Validator } from 'fluentvalidation-ts';

class FormDataValidator extends Validator {
constructor() {
super();

this.ruleFor('username')
.notEmpty()
.withMessage('username is a required field');
this.ruleFor('password')
.notEmpty()
.withMessage('password is a required field');
}
}

const App = () => {
const { register, handleSubmit } = useForm({
resolver: fluentValidationResolver(new FormDataValidator()),
});

return (


console.log(d))}>

{errors.username && {errors.username.message}}

{errors.password && {errors.password.message}}
submit

);
};


``

Backers

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

Contributors

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