React Hook Form

React hook form is a tiny library without any other dependencies. It is easy to use which requires us to write fewer lines of code compared to other libraries.
1. Why Not Other React Library Forms?
  • Performance is important. This is a tiny library without any dependencies.
  • Reduces the code to handle forms, with less complexity due to the Hooks.
  • Minimizes the number of re-renders and faster mount.
  • 2. Installation
    It's the time to make our forms powerful with the use of React Hook Forms! Open your terminal and then execute the following commands which makes a new React project:
    npx create-react-app react-hook-form-demo
    cd react-hook-form-demo
    npm install react-hook-form
    npm start
    At the end of the article we will be able to create a simple registration form like this
    let's start
    3. Basic form

    Assume that we have a simple form with a user name input field and logs the data on console after submission

    const App=()=> {
      return (
        <form>
          <input type="text" placeholder="user name"/>
          <button type="submit">submit</button>
        </form>
      );
    }
    
    export default App;
    Time to import react hook form
    import { useForm } from "react-hook-form";
    
    const App = () => {
      const { register, handleSubmit } = useForm();
      const onSubmit = (data) => console.log(data);
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <input type="text" placeholder="user name" {...register("userName")} />
          <button type="submit">submit</button>
        </form>
      );
    };
    
    export default App;
    After submittion we got the consoled data but what are those new words (useForm , register )
    Before we move ahead we need to know how this library works,
    useForm
    register
    handleSubmit
    4.Adding default values (initial values)
    It is common to initialize a form by passing defaultValues to useForm.
    const { register, handleSubmit } = useForm({
        defaultValues: {
          userName: "Mai",
        }
      });
    5. Basic validation

    Assume that we need to validate this user name input to be a required field and must be at least 3 characters

    import { useForm } from "react-hook-form";
    
    const App = () => {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm({ mode: "onChange" });
      const onSubmit = (data) => console.log(data);
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type="text"
            placeholder="user name"
            {...register("userName", {
              required: true,
              minLength: {
                value: 3,
              },
            })}
          />
          {errors.userName?.type === "required" && (
            <small>user name is required</small>
          )}
          {errors.userName?.type === "minLength" && (
            <small>user name must be atleast 3</small>
          )}
          <button type="submit">submit</button>
        </form>
      );
    };
    
    export default App;
    React Hook Form provides an errors object to show you the errors in the form.
    5. Adding nested fields

    Assume that user should enter his address throw two nested fields (country , city)
    the final view should be like this
    {userName:"toty",
     address:{country:"x",city:"y"}
    }
    import { useForm } from "react-hook-form";
    
    const App = () => {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm({ mode: "onChange" });
      const onSubmit = (data) => console.log(data);
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type="text"
            placeholder="user name"
            {...register("userName", {
              required: true,
              minLength: {
                value: 3,
              },
            })}
          />
          {errors.userName?.type === "required" && (
            <small>user name is required</small>
          )}
          {errors.userName?.type === "minLength" && (
            <small>user name must be atleast 3</small>
          )}
    
          <input
            type="text"
            placeholder="country"
            {...register("address.country", {
              required: true,
            })}
          />
          <input
            type="text"
            placeholder="city"
            {...register("address.city", {
              required: true,
            })}
          />
          <button type="submit">submit</button>
        </form>
      );
    };
    
    export default App;
    Wooow It is soo easy !!
    6. Integration with react bootstrap
    import { Form } from "react-bootstrap";
    const Input = ({
      label,
      type,
      placeholder,
      controls,
      errorMsg,
      disabled,
    }) => {
      return (
        <div className="mb-3">
          {label && <Form.Label> 
          {label}</Form.Label>}
          <Form.Control
            {...controls}
            type={type}
            placeholder={placeholder}
            disabled={disabled}
          />
          {errorMsg && <small> 
          {errorMsg}</small>}
        </div>
      );
    };
    export default Input;
    and the main component after refactoring should be like this
    <Input
          label="User Name"                
          type="text"
           placeholder="enter your user name"
           controls={register("userName", {
           required: true,
           minLength: {
           value: 3,
           },
            })}
          errorMsg={
          errors.userName?.type === "required" &&
          "user name is required"
           }
    
          />
    7. Integration with third party libraries
    Assume that our third party library is React select
    npm install react-select
    first we need to add a shared component for react select
    import React from "react";
    import Select from "react-select";
    import { Controller } from "react-hook-form";
    
    const InputSelect = ({
      options,
      label,
      control,
      controls,
      name,
      errorMsg,
      placeholder,
      asterick,
    }) => {
      return (
        <>
          <label>
            {label} {asterick && <span>*</span>}
          </label>
          <Controller
            name={name}
            isClearable
            control={control}
            {...controls}
            render={({ field }) => (
              <Select
                {...field}
                options={options}
                placeholder={placeholder}
              />
            )}
          />
          {errorMsg && <small>{errorMsg}</small>}
        </>
      );
    };
    export default InputSelect;
    But what Controller means
    It is a wrapper component from react hook form that makes it easier for you to work with third party libraries.
    and now we can use this select in our main component like this
    const genderOptions = [
        { value: "male", label: "Male" },
        { value: "female", label: "Female" },
      ];
    <InputSelect
      control={control}
      options={genderOptions}
      placeholder="Gender"
      asterick={true}
      label="Gender"
      name="gender"
      controls={register("gender", {
      required: true,
       })}
      errorMsg={
      errors?.gender?.type === "required" && 
      "gender is required"
        }
       />
    stay tuned for the next article to complete our journey in react hook forms
    and don't forget your feed back.

    13

    This website collects cookies to deliver better user experience

    React Hook Form