React Hook Form is a library that helps you to simplify form validation. It uses React hooks to inject required validation checks and to bind a form and a submit handler.

Let's create a signup form with React Hook Form and then type it with TypeScript.

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">
      <form>
        <label>
          Your name:
          <input type="text" name="name" />
        </label>

        <label>
          Your email:
          <input type="email" name="email" />
        </label>

        <label>
          Your phone:
          <input type="tel" name="phone" />
        </label>
        
        <button>Send</button>
      </form>
    </div>
  );
};

To connect the form with validation checks we will use 

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

const App: React.FC = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data): void => {
    console.log(data);
  };
  
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>
          Your name:
          <input 
            type="text" 
            name="name"
            ref={register} />
        </label>

        <label>
          Your email:
          <input 
            type="email" 
            name="email"
            ref={register} />
        </label>

        <label>
          Your phone:
          <input 
            type="tel" 
            name="phone"
            ref={register} />
        </label>
        
        <button>Send</button>
      </form>
    </div>
  );
};

 prop on each input. It binds the input with validation. 

 will call the provided callback if validation is successful. In our case, it will call 

 callback and log out all the data from the form.

Now let's create a type for form data. Let's call it 

type UserName = string;
type Email = string;
type Phone = string;

// This type will be used later in the form.
type User = {
  name: UserName;
  email: Email;
  phone: Phone;
};

When type is created we can use it to annotate the form data:

// ...

const App: React.FC = () => {
  // We use `useForm` as a generic function,
  // as a type parameter, we specify the `User` type.
  // It will tell TS that the form contains the
  // data structure which is described with this type.
  const { register, handleSubmit } = useForm<User>();
  
  // `onSubmit` will automatically accept
  // an object of `User` type.
  const onSubmit = (data: User): void => {
    console.log(data);
  };
  
  // No changes in the form itself required.
  // Make sure that `name` attributes of each input
  // correspond with `User` type fields though.
  // ...
}

To make an input required, we can provide 

 with a settings object. When we specify the 

 object. We can use this object to access errors on every field in the form:

// ...

const App: React.FC = () => {
  const { 
    register, 
    handleSubmit, 
    errors 
  } = useForm<User>();
  
  const onSubmit = (data: User): void => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>
          Your name:
          <input 
            type="text" 
            name="name" 
            ref={register({ required: true })} 
           />
        </label>
        {/* When there is an error 
            tell the user about it */}
        {errors.name && <div>Name is required.</div>}

        <label>
          Your email:
          <input
            type="email"
            name="email"
            ref={register({ required: true })}
          />
        </label>
        
        {errors.email && <div>Email is required.</div>}

        <label>
          Your phone:
          <input
            type="tel"
            name="phone"
            ref={register({ required: true })}
          />
        </label>
        
        {errors.phone && (
          <div>Phone number is required.</div>
        )}

        <button>Send</button>
      </form>
    </div>
  );
};

We can also specify a required pattern for each field to perform custom checks:

// ...

const App: React.FC = () => {
  // ...

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* ... */}

        <label>
          Your email:
          <input
            type="email"
            name="email"
            ref={register({ 
              required: true,
              // We want the value to contain @ sign:
              pattern: /.+@.+/
            })}
          />
        </label>
        {/* We use optional chaining (?.)
            to make null-checks easier. */}
        {errors?.email?.type === "required" && (
          <div>Email is required.</div>
        )}
        {/* Different errors have different types,
            so we can render any message for any error
            we want to. */}
        {errors?.email?.type === "pattern" && (
          <div>Email should be in xxx@yyy.zzz format.</div>
        )}

        <label>
          Your phone:
          <input
            type="tel"
            name="phone"
            ref={register({ 
              required: true,
              // We want a number in 11-digits format.
              pattern: /\d{11}/,
            })}
          />
        </label>
        {errors?.phone?.type === "required" && (
          <div>Phone number is required.</div>
        )}
        {errors?.phone?.type === "pattern" && (
          <div>Phone number should contain 11 digits.</div>
        )}

        <button>Send</button>
      </form>
    </div>
  );
};

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use <code>react-hook-form</code> with TypeScript</h1><p>React Hook Form is a library that helps you to simplify form validation. It uses React hooks to inject required validation checks and to bind a form and a submit handler.</p><p>Let's create a signup form with React Hook Form and then type it with TypeScript.</p><h2><a name="signup-form" id="signup-form">Signup Form</a></h2><p>Out form will contain 3 fields:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-XsALK" id="cm-XsALK">import React from 'react';

const App: React.FC = () =&gt; {
  return (
    &lt;div className="App"&gt;
      &lt;form&gt;
        &lt;label&gt;
          Your name:
          &lt;input type="text" name="name" /&gt;
        &lt;/label&gt;

        &lt;label&gt;
          Your email:
          &lt;input type="email" name="email" /&gt;
        &lt;/label&gt;

        &lt;label&gt;
          Your phone:
          &lt;input type="tel" name="phone" /&gt;
        &lt;/label&gt;
        
        &lt;button&gt;Send&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};</textarea><p>To connect the form with validation checks we will use <code>useForm</code> hook from the React Hook Form API:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-oxjla" id="cm-oxjla">import React from 'react';
import { useForm } from "react-hook-form";

const App: React.FC = () =&gt; {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data): void =&gt; {
    console.log(data);
  };
  
  return (
    &lt;div className="App"&gt;
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;label&gt;
          Your name:
          &lt;input 
            type="text" 
            name="name"
            ref={register} /&gt;
        &lt;/label&gt;

        &lt;label&gt;
          Your email:
          &lt;input 
            type="email" 
            name="email"
            ref={register} /&gt;
        &lt;/label&gt;

        &lt;label&gt;
          Your phone:
          &lt;input 
            type="tel" 
            name="phone"
            ref={register} /&gt;
        &lt;/label&gt;
        
        &lt;button&gt;Send&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};</textarea><p>Here, we use <code><a href="https://react-hook-form.com/api#register" rel="noopener noreferrer nofollow">register</a></code> as a value to <code>ref</code> prop on each input. It binds the input with validation. </p><p>We need to pass the <code>name</code> attribute as well since <code>register</code> relies on it. Also, the <code>name</code> must be unique for <code>register</code> to work properly.</p><p>The <code><a href="https://react-hook-form.com/api#handleSubmit" rel="noopener noreferrer nofollow">handleSubmit</a></code><a href="https://react-hook-form.com/api#handleSubmit" rel="noopener noreferrer nofollow"> function</a> will call the provided callback if validation is successful. In our case, it will call <code>onSubmit</code> callback and log out all the data from the form.</p><h2><a name="form-types" id="form-types">Form Types</a></h2><p>Now let's create a type for form data. Let's call it <code>User</code>:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-wqnUq" id="cm-wqnUq">type UserName = string;
type Email = string;
type Phone = string;

// This type will be used later in the form.
type User = {
  name: UserName;
  email: Email;
  phone: Phone;
};</textarea><p>When type is created we can use it to annotate the form data:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-xibCo" id="cm-xibCo">// ...

const App: React.FC = () =&gt; {
  // We use `useForm` as a generic function,
  // as a type parameter, we specify the `User` type.
  // It will tell TS that the form contains the
  // data structure which is described with this type.
  const { register, handleSubmit } = useForm&lt;User&gt;();
  
  // `onSubmit` will automatically accept
  // an object of `User` type.
  const onSubmit = (data: User): void =&gt; {
    console.log(data);
  };
  
  // No changes in the form itself required.
  // Make sure that `name` attributes of each input
  // correspond with `User` type fields though.
  // ...
}</textarea><h2><a name="required-fields" id="required-fields">Required Fields</a></h2><p>To make an input required, we can provide <code>register</code> with a settings object. When we specify the <code>required</code> field as <code>true</code>, the validation returns an <code>errors</code> object. We can use this object to access errors on every field in the form:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-OOkl3" id="cm-OOkl3">// ...

const App: React.FC = () =&gt; {
  const { 
    register, 
    handleSubmit, 
    errors 
  } = useForm&lt;User&gt;();
  
  const onSubmit = (data: User): void =&gt; {
    console.log(data);
  };

  return (
    &lt;div className="App"&gt;
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;label&gt;
          Your name:
          &lt;input 
            type="text" 
            name="name" 
            ref={register({ required: true })} 
           /&gt;
        &lt;/label&gt;
        {/* When there is an error 
            tell the user about it */}
        {errors.name &amp;&amp; &lt;div&gt;Name is required.&lt;/div&gt;}

        &lt;label&gt;
          Your email:
          &lt;input
            type="email"
            name="email"
            ref={register({ required: true })}
          /&gt;
        &lt;/label&gt;
        
        {errors.email &amp;&amp; &lt;div&gt;Email is required.&lt;/div&gt;}

        &lt;label&gt;
          Your phone:
          &lt;input
            type="tel"
            name="phone"
            ref={register({ required: true })}
          /&gt;
        &lt;/label&gt;
        
        {errors.phone &amp;&amp; (
          &lt;div&gt;Phone number is required.&lt;/div&gt;
        )}

        &lt;button&gt;Send&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};</textarea><h2><a name="custom-validation" id="custom-validation">Custom Validation</a></h2><p>We can also specify a required pattern for each field to perform custom checks:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-ErmVp" id="cm-ErmVp">// ...

const App: React.FC = () =&gt; {
  // ...

  return (
    &lt;div className="App"&gt;
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        {/* ... */}

        &lt;label&gt;
          Your email:
          &lt;input
            type="email"
            name="email"
            ref={register({ 
              required: true,
              // We want the value to contain @ sign:
              pattern: /.+@.+/
            })}
          /&gt;
        &lt;/label&gt;
        {/* We use optional chaining (?.)
            to make null-checks easier. */}
        {errors?.email?.type === "required" &amp;&amp; (
          &lt;div&gt;Email is required.&lt;/div&gt;
        )}
        {/* Different errors have different types,
            so we can render any message for any error
            we want to. */}
        {errors?.email?.type === "pattern" &amp;&amp; (
          &lt;div&gt;Email should be in xxx@yyy.zzz format.&lt;/div&gt;
        )}

        &lt;label&gt;
          Your phone:
          &lt;input
            type="tel"
            name="phone"
            ref={register({ 
              required: true,
              // We want a number in 11-digits format.
              pattern: /\d{11}/,
            })}
          /&gt;
        &lt;/label&gt;
        {errors?.phone?.type === "required" &amp;&amp; (
          &lt;div&gt;Phone number is required.&lt;/div&gt;
        )}
        {errors?.phone?.type === "pattern" &amp;&amp; (
          &lt;div&gt;Phone number should contain 11 digits.&lt;/div&gt;
        )}

        &lt;button&gt;Send&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};</textarea><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://react-hook-form.com" rel="noopener noreferrer nofollow">React Hook Form</a></p></li><li><p><code><a href="https://react-hook-form.com/api#useForm" rel="noopener noreferrer nofollow">useForm</a></code><a href="https://react-hook-form.com/api#useForm" rel="noopener noreferrer nofollow"> hook</a></p></li><li><p><code><a href="https://react-hook-form.com/api#register" rel="noopener noreferrer nofollow">register</a></code></p></li><li><p><code><a href="https://react-hook-form.com/api#handleSubmit" rel="noopener noreferrer nofollow">handleSubmit</a></code></p></li><li><p><a href="https://www.newline.co/@bespoyasov/how-to-use-generics-in-typescript--c9b8f89f" rel="noopener noreferrer nofollow">How to Use Generics with TypeScript</a></p></li></ul><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Use react-hook-form with TypeScript

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript