react-hook-form

πŸ“‹ React Hooks for forms validation (Web + React Native)

Showing:

Popularity

Downloads/wk

1.2M

GitHub Stars

23.6K

Maintenance

Last Commit

2d ago

Contributors

192

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

4.8/599
Read All Reviews
VasilyShelkov
HarthSid
ghanlohar
preveenraj
reverie
ggolubic
matthewmaclay

Top Feedback

43Great Documentation
37Easy to Use
37Performant
27Highly Customizable
23Bleeding Edge
19Responsive Maintainers

Readme

npm downloads npm npm Discord

Version 7 | Version 6

English | ζ—₯本θͺž

Features

Install

npm install react-hook-form

Quickstart

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

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} /> {/* register an input */}
      <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>}
      <input type="submit" />
    </form>
  );
}

Sponsors

Thanks go to these kind and lovely sponsors (companies and individuals)!

@sayav @lemcii @washingtonsoares @lixunn @SamSamskies @peaonunes @wilhelmeek @iwarner @joejknowles @chris-gunawardena @Tymek @Luchanso @vcarel @gragland @tjshipe @krnlde @msutkowski @mlukaszczyk

Backers

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

Organizations

Thanks go to these wonderful organizations! [Contribute].

Contributors

Thanks go to these wonderful people! [Become a contributor].

Rate & Review

Great Documentation43
Easy to Use37
Performant37
Highly Customizable27
Bleeding Edge23
Responsive Maintainers19
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Vasily ShelkovDorset45 Ratings46 Reviews
8 months ago
Great Documentation
Easy to Use
Bleeding Edge
Performant

After having used Redux-forms and then Formik moving away from redux. This felt a very natural form library to use. Why did I use it when I was already using a great form library? main reasons: 1. It felt like it was a better level of abstraction which only took responsibility for the form state and behaviour but leaving the markdown alone. 2. It has a smaller package size compared to formik (gotta think about user's download) 3. It's more performant and optimises how often the form re-renders. Then as well as the above, I found that their documentation of typescript types was amazing and definitely a learning for other library documentations!


5
JamesWong1999
pooya121
bluebill1049
Smiter15
davymacca
HarthSid53 Ratings70 Reviews
7 months ago
Great Documentation
Easy to Use
Performant
Highly Customizable

I have been struggling with forms in my React apps. It was no less than a nightmare for me working with forms in React. I came to know about this app and it has helped me a lot in making validation enabled forms with proper error messages.


8
JamesWong1999
bluebill1049
Harshsidh
spartan269
harssid3
harthsid2-hub
sawan-hardcoder
Ghan LoharPune27 Ratings22 Reviews
Senior Software Engineer at Red Hat. JS guy, Open Source newbie.
20 days ago
Great Documentation
Easy to Use
Performant
Highly Customizable

The best form libraries I have used till now. It is very easy to use, performant and has nice documentation. It supports the integration to other UI libraries as well. I have used it with PatternFly React components with their inbuilt Controller components. This fits very well and works like a breeze. I really like the way it can be extended, I used Yep schema builder with this to validate the input data. It also has easy and efficient error handling.


4
bluebill1049
abhijithvijayan
sayak-sarkar
riginoommen
Preveen RajKochi, Kerala, India58 Ratings49 Reviews
Software Engineer @bigbinary
4 months ago
Great Documentation
Highly Customizable
Easy to Use

My React components used to be messed up with a lot of useStates to track fields and their errors in a form. I was starting to get tired of it. Then my friend suggested me react-hook-form where everything felt pretty opinionated. Where we could define a structured schema, register each input field. And even wrap complex inputs like react-select under controller and customize it as our needs. Just the blue pill everyone needs for a compact form controller in react.


3
bluebill1049
vishnuprasad-95
ajayesivan
Andrew BadrNew York, NY2 Ratings2 Reviews
June 26, 2020
Performant
Highly Customizable
Bleeding Edge
Responsive Maintainers

This is where it's at. A React form library that is both well thought out and flexible enough to get out of your way when you need it to. After fussing around with React forms for years, switching to react-hook-form feels like a superpower. Everything runs faster and my code is cleaner.


3
JamesWong1999
tktk0430
bluebill1049