Fluent UI で React Hook Form を使ってみる

はじめに

React におけるフォーム ライブラリとしては React Hook Form が有名です。React Hook Form は面倒なフォームのバリデーションや値の管理などが簡単に実現できます。検索結果の情報量も多いので導入しやすいと思います。React Hook Form は HTML 標準のフォーム要素だけではなく UI ライブラリに対しても適用することができます。今回は Fluent UI で React Hook Form を使ってみます。

サンプル コード

https://github.com/karamem0/samples/tree/main/react-fluentui-northstar-with-react-hook-form

実装方法

React Hook Form は ref を使ってフォームを操作します。ref を渡す方法は register する方法と Cotroller を使う方法がありますが、 HTML 標準のフォーム要素ではない場合は Cotroller を使用します。Cotroller は render プロパティによって実際にレンダリングされるフォーム要素を指定することができ、field パラメーターを経由して ref の設定やイベントの伝播を行います。

以下にいくつかの例を挙げます。

FormInput

FormInput は 1 行テキストを入力するフォーム要素です。

<Controller
  control={form.control}
  defaultValue={""}
  name="{{name}}"
  rules={{
    required: 'The value is requred',
  }}
  render={({ field, fieldState }) => (
    <FormInput
      ref={field.ref}
      errorMessage={fieldState.error?.message}
      value={field.value}
      onChange={(_, props) => field.onChange(props?.value)}
      onBlur={field.onBlur}
    />
  )}
/>

FormTextArea

FormTextArea は複数行テキストを入力するフォーム要素です。

<Controller
  control={form.control}
  defaultValue={""}
  name="{{name}}"
  rules={{
    required: 'The value is requred',
  }}
  render={({ field, fieldState }) => (
    <FormTextArea
      ref={field.ref}
      errorMessage={fieldState.error?.message}
      value={field.value}
      onChange={(_, props) => field.onChange(props?.value)}
      onBlur={field.onBlur}
    />
  )}
/>

FormDatepicker

FormDatepicker は日付を選択するフォーム要素です。

<Controller
  control={form.control}
  defaultValue={new Date()}
  name="{{name}}"
  rules={{
    required: 'The value is requred',
  }}
  render={({ field, fieldState }) => (
    <FormDatepicker
      ref={field.ref}
      errorMessage={fieldState.error?.message}
      selectedDate={field.value}
      onDateChangeError={(_, value) => form.setError(field.name, { message: value?.error })}
      onDateChange={(_, props) => field.onChange(props?.value)}
      onBlur={field.onBlur}
    />
  )}
/>

実行結果

初期表示はこんな感じ。

Submit したときにバリデーションを実行してエラーを表示します。

エラーがなければ値を Submit します。

おわりに

Yup などを使うとより高度なバリデーションが実現できます。