# はじめに
昨今のReactのフォームライブラリではスタンダードになっているReact Hook Form (v7) と、これもReactのプロジェクトではよく用いられるMUI (v5)の各種入力部品を組み合わせて、汎用的に使用できる入力部品を作ってみた。テキストの入力においては純粋なテキスト (string型) の入力と、数値 (number型) の入力を分けたくなるのが常なので、MUIの `TextField` をベースに、`MuiTextField` と `MuiNumericField` の2つを用意してこれらを区別した。また、数値の入力部品では入力値をフォーマットして表示したい場面も多いので、`MuiNumericField` にはreact-number-formatも組み込んで、入力値のフォーマットができるようにした。

> info:執筆時の依存バージョン (最終更新2022/12/17)
> 
> - React v18.2.0
> - MUI v5.8.4
> - React Hook Form v7.30.0
> - react-number-format v5.1.2

先に最終的なデモを貼っておく。

<iframe src="https://yukiyokotani.github.io/react-hook-form/"
  style="width:100%; height:630px; border:0; border-radius: 4px; overflow:hidden;"
  title="MUI Input Components Linked to React Hook Form"
  allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; midi; payment; usb; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

一連のファイルを置いたGitHubリポジトリは以下になる。

https://github.com/yukiyokotani/react-hook-form

**現状形になっている部品一覧**

- [MuiTextField](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiTextField.tsx)
- [MuiNumericField](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiNumericField.tsx)
- [MuiDatePicker](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiDatePicker.tsx)
- [MuiCheckbox](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiCheckbox.tsx)
- [MuiSelect](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiSelect.tsx)
- [MuiAutocomplete](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiAutocomplete.tsx)

以降では今回のインターフェース設計の思想と、実装時に得られた雑多な情報について軽く書きとめおく。この汎用部品を使いたい方はすぐ後の「利用者側から見たインターフェース」で使い方の雰囲気だけさっと眺めてGitHubに置いた[サンプルのフォーム実装](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/MuiForm.tsx)を見てもらうのがいいと思う。

# インターフェース
## 利用者側から見たインターフェース
インターフェースを紹介するために、一番シンプルな `MuiTextField` (string型のテキスト入力部品) の利用方法を紹介する。`MuiTextField` 以外の部品も同じインターフェイス設計になっているので、`MuiTextField` が分かれば他の部品も簡単に利用できるようになっている。

今回の汎用部品は型引数としてフォームオブジェクトの型を取るようにした。フォームの型はTypeScriptでReact Hook Formを使う場合は必ず定義する (そして `useForm` の型引数に渡す) ことになるので、同じものをそのまま渡せば良い。ここで型を渡すと、入力部品の `name` のPropsに渡した文字列が、ちゃんとフォームのkeyとして存在するかチェックされる。

```javascript:MuiTextFieldの使用例
<MuiTextField<FormData>
  name='name'
  control={control}
  rules={{
    required: '必須項目です。',
    maxLength: {
      value: 5,
      message: '5文字以内で入力してください。'
    }
  }}
  config={{
    displayErrorMessage: true
  }}
  muiProps={{
    textFieldProps: {
      label: '名前',
      fullWidth: true
    }
  }}
/>
```

上記の通り、Propsは大きく3つに分けて設計した。
- **React Hook Formで定義されているProps**  
  今回はこれを入力部品のベースのインターフェースとする
- **MUIの部品に対して定義されているProps**  
  今回はこれを `muiProps` としてまとめる
- **部品の提供者が追加で提供する設定項目のProps**  
  今回はこれを `config` としてまとめる

上の例で言うと、`name`, `control`, `rules`がReact Hook Form向けのインターフェイスである。今回の汎用部品ではこれを設計のベースにしているので、ネストしないPropsとして渡すことができる。このうち `control` と `name` はReact Hook Formによる制御において必須なので、Propsとしても必須にしている。一方で `rules` は必須ではなく、[Zod](https://github.com/colinhacks/zod)等のschemaライブラリを使ってフォームのschemaを定義し、`useForm` にschemaを渡す形でもバリデーションが実現できるようになっている。勿論バリデーションなしでも良い。

## 提供者側から見たインターフェース
とにかくPropsが多いので、3つの大きなまとまりで分けて管理するようにした。一つ目は今回主役となっているReact Hook FormのProps、2つ目はMUIのComponentのProps、3つ目が部品を提供する側が独自で組み込みたいオプションを提供するためのPropsである。

### React Hook FormのProps
React Hook Formのインターフェイスは `UseControllerProps` としてライブラリから提供されている。このPropsはインターフェースとして最表面に出ていて欲しい（ネストして欲しくない）ので、今回作る部品のPropsはこの型との交差型にすることにした。上記のサンプルで言うと、`name`, `control`, `rules`はReact Hook Formが公開しているインターフェイスで定義されたPropsである。

### MUI ComponentのProps
MUIのPropsは部品によっては複数必要になる。例えばAutocompleteではAutocomplete自体のPropsに加えて、内部に持つTextFieldのProps　（フォームの幅やラベルなど）　も渡せるようにしたい。よって、これらはオブジェクトに整理して、PropsのmuiPropsという口で渡せるようにした。React Hook FormのPropsとMUIのPropsは同名のものが多く衝突する可能性が高い（そして意図せず衝突するとバグる）ので、最初から分けてバグを生む可能性を排除した。

### 部品提供者が独自に提供する設定項目
提供者が独自で組み込みたいオプションを提供するためのPropsについても、MUIのPropsと同様、オブジェクトにまとめて、configという口で渡せるようにした。react-number-formatのProps (`NumberFormatPropsBase`) は意味的にはここに収まるのが良いと考えたので、`MuiNumberField` のconfigについては `NumberFormatPropsBase` との交差型になっている。


# Introduction
I tried to create an input component that can be used universally by combining React Hook Form (v7), which has become a standard in the recent React form libraries, and various input components of MUI (v5), which is also commonly used in React projects. In the text input, it is always necessary to separate pure text (string type) input from numeric (number type) input, so based on the MUI `TextField`, I prepared two input components, `MuiTextField` and `MuiNumericField`, to distinguish between them. Also, since there are many situations where you want to format and display input values in numeric input parts, I also incorporated react-number-format into `MuiNumericField` so that you can format the input values.

> info:Dependent version at the time of writing (last updated on Dec. 17, 2022)
> 
> - React v18.2.0
> - MUI v5.8.4
> - React Hook Form v7.30.0
> - react-number-format v5.1.2

I'll post the final demo first. (Sorry for the Japanese sample.)

<iframe src="https://yukiyokotani.github.io/react-hook-form/"
  style="width:100%; height:630px; border:0; border-radius: 4px; overflow:hidden;"
  title="MUI Input Components Linked to React Hook Form"
  allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; midi; payment; usb; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

GitHub repository is below. (Commented in English.)

**List of currently available parts**.

- [MuiTextField](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiTextField.tsx)
- [MuiNumericField](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiNumericField.tsx)
- [MuiDatePicker](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiDatePicker.tsx)
- [MuiCheckbox](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiCheckbox.tsx)
- [MuiSelect](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiSelect.tsx)
- [MuiAutocomplete](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiAutocomplete.tsx)

From here, we will summarize the philosophy behind the interface design, the information we obtained for each library while creating this component, and the points that stuck out in the implementation.　If you want to use the generic input component implemented here, you can have a quick look at the "Interface from the User's Point of View" to get an idea of how to use it, and then look at the [sample form implementation](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/MuiForm.tsx) on GitHub.

## Interfaces
## Interface from the User's Point of View
To introduce the interface, we will show you how to use the simplest `MuiTextField` (a text input component of type `string`). The other components except for `MuiTextField` have the same interface design, so if you know `MuiTextField`, you can use the other components easily.

The component now takes the type of the form object as its type argument. The type of the form is always defined (and passed to the type argument of `useForm`) when using React Hook Form in TypeScript, so you can pass the same type as it is. If you pass the type here, it will be checked if the string you pass to the `name` props of the input component exists as a key of the form.

```javascript:Example of MuiTextField use
<MuiTextField<FormData, 'username'>
  name='username'
  control={control}
  rules={{
    required: 'Enter your username.',
    maxLength: {
      value: 10,
      message: 'Enter up to 10 characters.'
    }
  }}
  config={{
    displayErrorMessage: true
  }}
  muiProps={{
    textFieldProps: {
      label: 'Username',
      fullWidth: true
    }
  }}
/>
```

Props can be divided into three main categories.
- Props defined in React Hook Form. We will use this as the base interface for input components.
- Props defined for MUI components. This time, we will group them as `muiProps`.
- Additional configuration items for the part provided by the part provider. We will summarize this as `config`.

In the example above, `name`, `control`, and `rules` are the interfaces for the React Hook Form. In this generic part, since this is the base of the design, we can pass them as non-nested props. Among them, `control` and `name` are required for control by React Hook Form, so they are also required as Props. On the other hand, `rules` is not required, and validation can be realized by defining a form schema using a schema library such as [Zod](https://github.com/colinhacks/zod) and passing the schema to `useForm`. Of course, it is also possible without validation.

## Interface from the Provider's Point of View
Since there are a lot of Proposals, I decided to divide them into three major groups to manage them. The first is the React Hook Form Prop, which is the main component of this project, the second is the MUI Component Prop, and the third is the Prop to provide options that the component provider wants to incorporate on their own.

### Props of React Hook Form
The interface of React Hook Form is provided by the library as `UseControllerProps`. Since I want this Props to be on the top surface as an interface (I don't want it to be nested), I decided to make the Props of the part I'm going to create an intersection type with this type. In the above sample, `name`, `control`, and `rules` are Props defined in the interface exposed by React Hook Form.

### Props for MUI Component
Some parts require multiple MUI props. For example, in Autocomplete, in addition to Autocomplete's own Props, we want to be able to pass the internal TextField's Props (form width, label, etc.). Therefore, we organized them into objects, and made it possible to pass them through a mouth called muiProps of Props. Therefore, we have eliminated the possibility of creating bugs by separating them from the beginning.

### Configuration items provided independently by component providers
Props to provide options that providers want to incorporate into their own components are also grouped into an object and can be passed as config, just like props in the MUI. (`NumberFormatPropsBase`) is semantically better to fit here, so the `MuiNumberField` config is crossed with `NumberFormatPropsBase`.


Articles

React Hook Form, MUI, react-number-formatを組み合わせた汎用入力部品を作る