Fast and easy form validation for React based on native HTML capabilities
- ☯ Very easy to use
- 🚀 Really fast
- 🏋 Extra small bundle size
- 🤯 Can works without any state
- 💅 Native and customizable errors
- 👯 Multiple validation modes
- 📑 Custom validation with
- 🎉 Cross inputs validation
- 😎 Async validation
- 🔥 Support dynamic form
- 💬 Custom messages / translations
- 💯 Fully tested
- 📚 Support controlled components and UI libraries
- ⚡️ Compatible with Next.js server actions
- 👀 Watch values
- 💪 And much more...
# npm
npm install react-hook-form
# yarn
yarn add react-hook-form
# pnpm
pnpm install react-hook-form
import type { FormEvent } from 'react';
import { type IFormValues, useForm } from '@per-form/react';
export default function Demo() {
function handleSubmit(e: FormEvent<HTMLFormElement>, values: IFormValues) {
console.log(values);
}
const { formProps } = useForm({
onSubmit: handleSubmit,
});
return (
<form {...formProps}>
<input name="text" required />
<button type="submit">Submit</button>
</form>
);
}
import type { FormEvent } from 'react';
import { Form, type IFormValues } from '@per-form/react';
export default function Demo() {
function handleSubmit(e: FormEvent<HTMLFormElement>, values: IFormValues) {
console.log(values);
}
return (
<Form onSubmit={handleSubmit}>
<input name="text" required />
<button type="submit">Submit</button>
</Form>
);
}
Check the documentation for more.
Check the example App.
Clone this repo and then run:
npm i
npm run dev