React Material-UI + react-hooks-form

React.js の入力フォームのライブラリに react-hooks-form がありますが、これと Material-UI のコンポーネントを組み合わせる方法についてまとめます。
検索に時間がかかったので備忘録がてらまとめます。

全体像

全体を Boxコンポーネント（Form 要素）で囲み、TextField を配置しボタンで Submit 処理を発火しています。

肝となるのは react-hook-form の Controller コンポーネントです。
Controller コンポーネントの Props に render がありますが、こちらに表示したい Material-UI のコンポーネントを配置します。今回は TextField ですが、CheckBox なども可能です。

// １．FormすべてのPropsを宣言
// subject, email, messageのコードは省略している
type FormProps = {
  name: string;
  gender: string;
  subject: string;
  email: string;
  message: string;
};

const Contact: React.FC<any> = (props) => {
  // ２，react-hook-form使用の宣言
  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<FormProps>({
    mode: "onBlur", // blur イベントからバリデーションがトリガーされます。
    criteriaMode: "all", // all -> 発生した全てのエラーが収集されます。
    shouldFocusError: false, //true -> エラーのある最初のフィールドがフォーカスされます。
  });
  // ３．Submit発火時に実行されるメソッド。ここでPOSTメソッドなどを呼ぶ
  const onSubmit: SubmitHandler<FormProps> = (data) => {
    console.log(data);
  };

  return (
    <Box
      component="form"
      marginTop="50px"
      width="100%"
      display="flex"
      flexDirection="column"
      justifyContent="center"
      onSubmit={handleSubmit(onSubmit)}
    >
      <Controller
        name="name"
        control={control}
        rules={{
          required: "入力必須ですよ！",
          maxLength: {
            value: 30,
            message: "30文字以下で入力してくださいね！",
          },
        }}
        render={({
          field: { onChange, onBlur, value, name, ref },
          fieldState: { invalid, isTouched, isDirty, error },
        }) => (
          <TextField
            label="お名前"
            placeholder="田中太郎"
            multiline
            required
            value={value}
            variant="outlined"
            margin="dense"
            onChange={onChange}
            onBlur={onBlur}
            error={Boolean(error)}
            helperText={error?.message}
          />
        )}
      />

      {/*/email, gender, subject, message は省略*/}

      <Button type="submit" color="primary" variant="contained" size="large">
        送信する
      </Button>
    </Box>
  );
};

Props の型

Props の型は以下の通りですが、これは入力フォームの持つ要素に応じて変更します。
お名前、件名、メールアドレス、お問い合わせ内容があるイメージです。

type FormProps = {
  name: string;
  gender: string;
  subject: string;
  email: string;
  message: string;
};

useForm

react-hook-form を使用するために必要な関数宣言です。
関数宣言の引数にオブジェクトとしてオプションを渡しています。API v6

const {
  handleSubmit,
  control,
  formState: { errors },
} = useForm<FormProps>({
  mode: "onBlur", // blur イベントからバリデーションがトリガーされます。
  criteriaMode: "all", // all -> 発生した全てのエラーが収集されます。
  shouldFocusError: false, //true -> エラーのある最初のフィールドがフォーカスされます。
});

Controller

外部制御されたコンポーネントを使用するためのラッパーコンポーネントです。
公式によると Controller の Props である render の内部で Material-UI のコンポーネントを使用すると簡単になるらしいです。
Controller React Hook Form

rules という Props にオブジェクトを渡すことで、バリデーションを設定できます。以下にあるのは未入力、３１文字以上の際にエラーメッセージを表示させる例です。pattern など正規表現も取り扱っています。useForm register

  rules={{
    required: "入力必須ですよ！",
    maxLength: {
      value: 30,
      message: "30文字以下で入力してくださいね！",
    },
  }}

render のコールバックの引数にある name や onChange は、react-hook-form からの値を Material-UI コンポーネントの TextField に渡しています。fieldState オブジェクトの error は、name 要素がエラーだった（上記の rules が True のとき）、エラーのステートを返却します。エラーメッセージは error.message で取得できるのでそれを helperText の Props に渡してバリデーションメッセージを表示しています。

<Controller
  name="name"
  control={control}
  rules={{
    required: "入力必須やで！",
    maxLength: {
      value: 30,
      message: "30文字以下で入力するんやで！",
    },
  }}
  render={({
    field: { onChange, onBlur, value, name, ref },
    fieldState: { invalid, isTouched, isDirty, error },
  }) => (
    <TextField
      label="お名前"
      placeholder="田中太郎"
      required
      value={value}
      variant="outlined"
      margin="dense"
      onChange={onChange}
      onBlur={onBlur}
      error={Boolean(error)}
      helperText={error?.message}
    />
  )}
/>

参考

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

react-hook-form Controller

MUI Text Field