Skip to content
๐Ÿ“‹ React hooks for forms validation without the hassle.
TypeScript Other
Branch: master
Clone or download
Latest commit c929e0c Jan 21, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci ๐Ÿ˜ข enable circle ci Nov 15, 2019
.codesandbox ๐Ÿ“ฆ codesandbox with each PRs (#505) Nov 14, 2019
.github ๐Ÿ–‹ Update issue templates to include questions Oct 31, 2019
.vscode ๐Ÿ˜ฌ fix name of prettier config file in vscode settings (#767) Jan 3, 2020
app ๐Ÿงšโ€โ™‚๏ธ clean up useField automation app Jan 16, 2020
cypress fix #821 ssr issue (#828) Jan 14, 2020
docs update readme language order Dec 25, 2019
examples Delete nativeValidation.tsx Dec 28, 2019
src ๐Ÿฅ‚ fix useFieldArray issue with default value (#876) Jan 21, 2020
website ๐Ÿ“น update example.gif Dec 23, 2019
.eslintrc.js ๐ŸŒธ chore(eslintrc): change react version to `detect` (#818) Jan 12, 2020
.gitignore ๐Ÿ—‘ clean up ignore files Aug 26, 2019
.npmignore ๐Ÿž fix #547 around isValid after reset (#552) Nov 22, 2019
.npmrc Fix some utility functions (#168) Jul 30, 2019
.prettierrc ๐Ÿ’…๐Ÿป prettier the whole code base and update script Sep 3, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Apr 3, 2019
CONTRIBUTING.md โค๏ธ Uplift the Contributing instructions (#364) Oct 11, 2019
LICENSE ๐Ÿ“… update License Sep 15, 2019
README.md update readme language order Dec 25, 2019
cypress.json disable video capture in cypress.json at build Aug 12, 2019
jest.config.js intial commit Mar 6, 2019
package.json 4.6.1 Jan 21, 2020
rollup.config.js ๐Ÿ—ž chore(rollup): fix build warning messages (#623) Dec 5, 2019
rollup.ie11.config.js ๐Ÿ—ž chore(rollup): fix build warning messages (#623) Dec 5, 2019
rollup.min.config.js ๐Ÿฅ‚improve on getting value (#246) Aug 23, 2019
setup.ts โš’ use mutationobserver-shim for unit test Sep 16, 2019
tsconfig.ie11.json push tsconfig for ie11 Aug 20, 2019
tsconfig.jest.json Remove errors from Typescript usage (#54) Jun 5, 2019
tsconfig.json ๐Ÿ’… update exclude folders Aug 31, 2019
yarn.lock ๐Ÿ‘Š fix #833 field array dirty formState (#855) Jan 20, 2020

README.md

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

CircleCI npm downloads npm dep npm Coverage Status

Tweetย Join the community on Spectrum

๐Ÿ‡ฆ๐Ÿ‡บEnglish | ๐Ÿ‡จ๐Ÿ‡ณ ็ฎ€ไฝ“ไธญๆ–‡ | ๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž | ๐Ÿ‡ฐ๐Ÿ‡ทํ•œ๊ตญ์–ด | ๐Ÿ‡ซ๐Ÿ‡ทFranรงais | ๐Ÿ‡ฎ๐Ÿ‡นItaliano | ๐Ÿ‡ง๐Ÿ‡ทPortuguรชs | ๐Ÿ‡ช๐Ÿ‡ธEspaรฑol | ๐Ÿ‡ท๐Ÿ‡บะ ัƒััะบะธะน

Features

  • Built with performance and DX in mind
  • Embrace uncontrolled form validation
  • Improve controlled form's performance
  • Tiny size without any dependency
  • Follows HTML standard for validation
  • Compatible with React Native
  • Supports Yup schema-based validation
  • Supports native browser validation
  • Build forms quickly with the form builder

Install

$ npm install react-hook-form

Links

Quickstart

import React from 'react';
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit, errors } = useForm(); // initialise the hook
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} />
      {errors.lastname && 'Last name is required.'}

      <input name="age" ref={register({ pattern: /\d+/ })} />
      {errors.age && 'Please enter number for age.'}

      <input type="submit" />
    </form>
  );
}

Backers

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

Contributors

Thanks goes to these wonderful people. [Become a contributor].

You canโ€™t perform that action at this time.