Movatterモバイル変換

react-hook-form/react-hook-formPublic

NotificationsYou must be signed in to change notification settings
Fork2.2k
Star43.5k

📋 React Hooks for form state management and validation (Web + React Native)

react-hook-form.com

License

MIT license

43.5k stars 2.2k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 3,819 Commits
.codesandbox		.codesandbox
.github		.github
.husky		.husky
.vscode		.vscode
app		app
cypress		cypress
docs		docs
examples		examples
reports		reports
scripts		scripts
src		src
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
api-extractor.json		api-extractor.json
cypress.config.ts		cypress.config.ts
eslint.config.mjs		eslint.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json

Repository files navigation

Get started |API |Form Builder |FAQs |Examples

Features

Built with performance, UX and DX in mind
Embraces native HTML formvalidation
Out of the box integration withUI libraries
Small size and nodependencies
SupportYup,Zod,AJV,Superstruct,Joi andothers

Install

npm install react-hook-form

Quickstart

import{useForm}from'react-hook-form';functionApp(){const{    register,    handleSubmit,formState:{ errors},}=useForm();return(<formonSubmit={handleSubmit((data)=>console.log(data))}><input{...register('firstName')}/><input{...register('lastName',{required:true})}/>{errors.lastName&&<p>Last name is required.</p>}<input{...register('age',{pattern:/\d+/})}/>{errors.age&&<p>Please enter number for age.</p>}<inputtype="submit"/></form>);}