How to handle forms using React Hook Form

Handling forms in React is always time consuming mainly the part where developers need to handle a lot of input values. What if there is already ready to use functionality available for forms. In this article we will gonna learn how to handle forms using React Hook Form.

React Hook Form

This small library is built by keeping flexibility and performance in mind. The size of this library is 8.4KB. It’s not use any dependency internally. Also includes validation functionality.

Because it’s uncontrolled, you are no longer required to have onChange and set value to your input, start leveraging your existing HTML markup.

Installation

Like any other normal package you can install it from npm or yarn.

npm install react-hook-form --save

Usage

First of all import useForm from this library.

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

After that initialize the hook using useForm.

const { register, handleSubmit, errors } = useForm(); // initialise the hook

You will gonna see 3 keys i.e register, handleSubmit, errors from useForm.

  • register key is used for passing register to ref prop of the input.
  • handleSubmit returns submit data on submit button click.
  • errors includes the error of inputs validations.

Our submit function will gonna look like this.

 const onSubmit = (data) => {
    console.log(data);
  };

Form structure will be almost similar to native forms.

 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>
  );

Our full component will be gonna look like this.

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>
  );
}

If you compare this package with Formik or Redux form. It is easily beat them in performance department.

Demo

I hope you have liked this package. Feel free to comment your valuable feedback.

Top React Form and validation libraries


1 Comment

Phaser, a HTML5 game framework for developers - Blog React · July 27, 2020 at 3:38 am

[…] How to handle forms using React Hook Form Categories: JavaScriptReactjs Tags: JavaScriptReactjs Advanced […]

Comments are closed.