Skip to content
๐Ÿ“‹ React hook for form validation without the hassle
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci update package.json and circle ci Mar 14, 2019
.github/ISSUE_TEMPLATE Rename PULL_REQUEST_TEMPLATE.md to pull_request_template.md Apr 3, 2019
docs
examples update website and examples Apr 22, 2019
src fix a bug on the onBlur validation Apr 21, 2019
website
.gitignore update gitignore Mar 13, 2019
.npmignore remove website from npm Mar 18, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Apr 3, 2019
CONTRIBUTING.md Update CONTRIBUTING.md Mar 30, 2019
LICENSE Create LICENSE Apr 3, 2019
README.md Update README.md Apr 19, 2019
jest.config.js intial commit Mar 6, 2019
jestConfig.json intial commit Mar 6, 2019
package-lock.json 3.0.0 Apr 21, 2019
package.json 3.0.0 Apr 21, 2019
rollup.config.js update package.json Mar 7, 2019
setup.ts intial commit Mar 6, 2019
tsconfig.jest.json
tsconfig.json exclude examples folder for ts Mar 28, 2019
yarn.lock upgrade to latest dev Apr 10, 2019

README.md

React forme Logo - React hook form valiation

React hook form validation without the hassle

Tweetย  CircleCI Coverage Status npm downloads npm npm

  • Super easy to integrate and create forms
  • Built with React Hooks with performance and developer experience in mind
  • Follows HTML standard for validation
  • Tiny size without other any dependency
  • Build forms quickly with the form builder

Install

$ npm install react-hook-form

Docs

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) } // callback when validation pass
    
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}
      
      <input name="lastname" ref={register({ required: true })} /> {/* apply required validation */}
      {errors.lastname && 'Last name is required.'} {/* error message */}
      
      <input name="age" ref={register({ pattern: /\d+/ })} /> {/* apply a Refex validation */}
      {errors.age && 'Please enter number for age.'} {/* error message */}
      
      <input type="submit" />
    </form>
  )
}

Contributors

Thanks goes to these wonderful people:

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