React Hook Formによるフォームバリデーション

React Hook Formを利用すると、面倒なフォームバリデーション処理を簡単に記述できます。フォームバリデーションでよく遭遇するユースケースごとにサンプルも用意されている点も良いです。ここでは、React Hook Formの基本的な使い方を確認します。

インストール

create-react-app でReactプロジェクトを生成します。

npx create-react-app my-app --template typescript
cd my-app/

React Hook Form をインストールします。

yarn add react-hook-form

バージョンは以下の通りです。

$ yarn info react-hook-form | grep 'version:'
  version: '6.11.1',

基本的な利用方法( useForm )

ルール適用・エラーメッセージ表示

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

type FormInputs = {
  postTitle: string;
  postDescription: string;
};

const Sample: FC = () => {
  const { register, errors, handleSubmit } = useForm<FormInputs>();
  const onSubmit = (data: FormInputs) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="postTitle"
        ref={register({
          required: 'タイトルは必須です。',
          minLength: { value: 4, message: '4文字以上入力してください。' },
        })}
      />
      {errors.postTitle && errors.postTitle.message}

      <input
        name="postDescription"
        ref={register({
          required: '概要は必須です。',
          minLength: { value: 10, message: '10文字以上入力してください。' },
        })}
      />
      {errors.postDescription && errors.postDescription.message}

      <input type="submit" />
    </form>
  );
};

export default Sample;

useFormから、register関数 handleSubmit関数 errorsオブジェクト を取得しています。

764-react-react-hook-form_00.gif

実行結果です。

利用できるバリデーションルール

下記ルールを利用できます。

  • required
  • min
  • max
  • minLength
  • maxLength
  • pattern
  • validate

参考・利用例

複雑なバリデーションルール

yupを別途インストールすることで、より複雑なバリデーションルールを適用することもできます。

参考・利用例

ユースケースごとのサンプル

React Hook Formは、サンプルも提供しており Code Sandbox ですぐに動作確認できるので導入しやすいです。特に役に立ちそうなサンプルを紹介します。

パスワードの確認フォーム
( getValues )

getValuesを利用するとフォームの値を読み取ることができます。

パスワード入力フォームに入力した値パスワード確認フォームに入力した値 が一致しているかどうかチェックするというユースケースで活用できます。

サンプル

フィールドの状態に応じて切り替え
( watch )

watchを利用して特定フィールドの入力状態に応じて、表示を切り替えるなどすることができます。

サンプル

動的に増えるフォーム
( useFieldArray )

動的に増えるフォームが必要なとき、useFieldArrayを活用できます。

サンプル

ネストされたフォーム
( FormProvider useFormContext )

Contextを利用してpropsのバケツリレーを防ぐことができます。

https://react-hook-form.com/api#useFormContext

サンプル

非同期処理でサーバーと連携

サーバーと連携するユースケースで活用できるサンプルです。

サンプル

UIライブラリで利用

UIライブラリのコンポーネントがrefプロパティを公開していれば、registerを渡すだけで利用できます。
Material-UI の場合、inputRef にregisterを渡すだけで利用できます。

UIライブラリのコンポーネントがrefのプロパティを公開していない場合、Controllerコンポーネントでラップすることで利用できるようです。

https://react-hook-form.com/get-started#IntegratingwithUIlibraries

参考