0.0.11 • Published 4 years ago
@psymorias/hookform-resolvers-ajv v0.0.11
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].