環境は
react : 16.12
typescript : 3.7
react-hook-form : 4.7.2
でお送りします。

インストール

npmでライブラリのインストールをしましょう。

$ npm install react-hook-form

一つだけのバリデーション

準備ができたのでさっそく使ってみましょう。
最初に入力が必須のバリデーションを設定してみます。
InputFormというフォーム用のコンポーネントを作る想定で進めます。

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'


type FormData = {
  title: string
}


const InputForm: React.FC = () => {
  const { register, handleSubmit, errors, reset } = useForm<FormData>()


  const handleOnSubmit = (data: FormData) => {
    console.log(data.title);
    reset()
  }


  return (
    <div>
      <form onSubmit={handleSubmit(handleOnSubmit)}>
        <input
          type="text"
          className={errors.title && 'error'}
          name="title"
          ref={register({
                        required: 'タイトルは必ず入力してください。'
                    })}
        />
        { errors.title && <span className="error-message">{ errors.title.message }</span> }
        <button className="btn is-primary">追加</button>
      </form>
    </div>
  )
}


export default InputForm
2行目
useFormを使用するので、インポートしましょう。
3〜6行目
TypeScriptを使用している場合はフォームに使用する型を設定します。
9行目
useFormで使用する機能を変数に入れます。
11行目
フォームが送信されたとき実行される関数です。（18行目で設定してます。）
引数は設定したFormDataの形式で扱うことができます。
reset関数でインプットに入力した値をクリアーすることができます。
18行目
formにhandleSubmitを設定する必要があるので基本的にそのまま書きます。
21行目
エラーの時inputにもスタイル設定したいときは書きます。
23行目
バリデーションはrelに設定します。
「入力必須」の場合は、required: 'エラーメッセージ'という形で設定します。
27行目
エラーがあったとき表示するメッセージです。
エラーになるとerrors.title.messageにregisterで設定した文字列が入ります。

複数のバリデーション

先ほどは必須だけでしたが、基本的には文字数を設定したりとか複数のバリデーションを組み合わせるのがほとんどだと思います。
必須条件に追加して、3文字以上、100文字以下の条件を追加してみましょう。

registerを次の様に変更しましょう。

<input
  type="text"
  className={errors.title && 'error'}
  name="title"
  ref={register({
    required: 'タイトルは必ず入力してください。',
    minLength: { value: 3, message: 'タイトルは3文字以上入力してください。' },
    maxLength: { value: 100, message: 'タイトルは100文字以内で入力してください。' }
  })}
/>

minLengthとmaxLengthに関しては制御する文字数も必要なので、value、messageの形で設定します。

正規表現でカスタムバリデーションを設定する方法

バリデーションタイプは最低限のものしか用意されていないので、独自に設定する場合はpatternを使います。

<input
  type="text"
  className={errors.title && 'error'}
  name="title"
  ref={register({
    required: '必ず入力してください。',
    pattern: {
      value: /^\d{3}-\d{4}$/,
      message: '正しい郵便番号を入力してください。'
    }
  })}
/>

基本的な使い方は以上です。
その他にも色々機能がありますので詳しくは、下記ドキュメントをご確認ください。

React Hook Form

この記事の動画（Youtube）版はこちら！