React Hook Form Typescript example with Validation

In this tutorial, I will show you how to implement React Hook Form Typescript with Validation and Submit example using Hooks, react-hook-form 7 and Bootstrap 4.

More Practice:
– React Custom Hook in Typescript example
– React Typescript File Upload example
– React Typescript with API call example
– React Hooks: JWT Authentication (without Redux) example
– React Hooks + Redux: JWT Authentication example

Serverless with Firebase:
– React Hooks + Firebase Realtime Database: CRUD App
– React Hooks + Firestore example: CRUD app

Javascript version: React Hook Form Validation example with react-hook-form 7

Contents

Overview of React Hook Form Typescript example
Technology
Setup Project
Import Bootstrap 4
React Hook Form Typescript Register Type
React Hook Form Typescript with Validation
React Hook Form Typescript example
Run React Form Validation Hooks App
Conclusion
Source Code

Overview of React Hook Form Typescript example

We will implement validation and submit for a React Typescript Form using React Hook Form 7 and Bootstrap 4. The form has:

Full Name: required
Username: required, from 6 to 20 characters
Email: required, email format
Password: required, from 6 to 40 characters
Confirm Password: required, same as Password
Accept Terms Checkbox: required

Some fields could be wrong:

Successful Submission will look like this:

Technology

We’re gonna use following modules:

react 17/16
typescript 4.1.2
bootstrap 4
react-hook-form 7
yup
@hookform/resolvers 2.4.0

Setup Project

First we need to install necessary modules.
Open your project root folder, run the command:

npm install react-hook-form yup @hookform/resolvers

Open package.json, the dependencies will look like this:

{
  "name": "react-hook-form-typescript",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.10.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "yup": "^0.32.9"
  },
  ...
}

Import Bootstrap 4

Open public/index.html and add following line to <head> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link href="//netdna.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
    ...
    <title>React Hook Form Typescript with Validation</title>
  </head>
  <body>
    ...
    <div id="root"></div>
  </body>
</html>

Or you can run command: npm install bootstrap.

Then open src/App.tsx and modify the code inside it as following-

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const App: React.FC = () => {
  return (
    ...
  );
}

export default App;

React Hook Form Typescript Register Type

We continue to create Type for useForm – register method later.

import ...

type UserSubmitForm = {
  fullname: string;
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
  acceptTerms: boolean;
};

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

React Hook Form Typescript with Validation

The React Typescript component contains Form Validation example built with the React Hook Form library version 7.

Open src/App.tsx, we’re gonna import necessary library first:

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

Next we use Yup schema validation library for Form validation rules:

const App: React.FC = () => {
  const validationSchema = Yup.object().shape({
    fullname: Yup.string().required('Fullname is required'),
    username: Yup.string()
      .required('Username is required')
      .min(6, 'Username must be at least 6 characters')
      .max(20, 'Username must not exceed 20 characters'),
    email: Yup.string()
      .required('Email is required')
      .email('Email is invalid'),
    password: Yup.string()
      .required('Password is required')
      .min(6, 'Password must be at least 6 characters')
      .max(40, 'Password must not exceed 40 characters'),
    confirmPassword: Yup.string()
      .required('Confirm Password is required')
      .oneOf([Yup.ref('password'), null], 'Confirm Password does not match'),
    acceptTerms: Yup.bool().oneOf([true], 'Accept Terms is required')
  });

  ...
}

Then we pass the rules to the React Hook Form useForm() function using yupResolver() function from react-hook-form/resolvers library.

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

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm<UserSubmitForm>({
    resolver: yupResolver(validationSchema)
  });
  ...
}

The useForm() hook function returns an object that we use following methods:

register: register inputs
handleSubmit: handle form submit
reset:reset the form

The object also has formState that contains errors.

When the form is valid and submitted, onSubmit() method is called and the form data will show in console:

const App: React.FC = () => {
  ...
  const onSubmit = (data: UserSubmitForm) => {
    console.log(JSON.stringify(data, null, 2));
  };
  ...
}