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

> info:執筆時の依存バージョン
> 
> - React v18.0.0
> - MUI v5.6.2
> - React Hook Form v7.30.0
> - react-number-format v4.9.1

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

<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)
- [MuiNumberField](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiNumberField.tsx)
- [MuiDatePicker](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiDatePicker.tsx)
- [MuiAutocomplete](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiAutocomplete.tsx)

ここからはインターフェース設計の思想、この部品を作る中で得た各ライブラリに対する情報や、実装で引っかかった点をまとめていく。

# インターフェース
## インターフェースの概要
インターフェースを紹介するために、一番シンプルな `MuiTextField` (string型のテキスト入力部品) のテンプレート部分のみ紹介する。(実際に動作する完成コードについては冒頭のGitHubリポジトリを参照。) 他の部品も同じインターフェースになっている。

`<MuiTextField>` は型引数としてフォーム全体の型を取るようにした。TypeScriptでReact Hook Formを使う場合は必ず定義することになるので、それをそのまま渡せば良い。ここで型を渡すと、`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、2つ目はMUIのComponentのProps、3つ目が部品を提供する側が独自で組み込みたいオプションを提供するためのPropsである。
  - React Hook FormのPropsは `UseControllerProps` としてライブラリから提供されている。このPropsはインターフェースとして最表面に出ていて欲しい（ネストして欲しくない）ので、今回作る部品の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` との交差型になっている。

# React Hook Form
（作成中...）

# MUI
（作成中...）

- MUI XのDatePickerで「テキストフィールドに日付を入力したあと、カレンダーを表示してカレンダーの外をクリックして閉じると、フィールドの日付がリセットされる」バグがあり、それは今回作った部品でも起きている。バグが修正されると解決する予定。  
https://github.com/mui/mui-x/issues/4580

# react-number-format
（作成中...）

# 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 `MuiNumberField`, 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 `MuiNumberField` so that you can format the input values.

> info:Dependent version at the time of writing
> 
> - React v18.0.0
> - MUI v5.6.2
> - React Hook Form v7.30.0
> - react-number-format v4.9.1

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)
- [MuiNumberField](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiNumberField.tsx)
- [MuiDatePicker](https://github.com/yukiyokotani/react-hook-form/blob/main/src/mui-form/components/MuiDatePicker.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.

## Interfaces
## Interface Overview
To introduce the interface, only the simplest template part of `MuiTextField` (string type text input component) is introduced. (See the GitHub repository at the beginning of this article for the completed code that actually works.) The other parts have the same interface.

The `<MuiTextField>` takes the entire form type as a type argument, which is always defined when using React Hook Form in TypeScript, so you can pass it as it is. If you pass the type here, it will be checked if the string passed to the `name` props 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
    }
  }}
/>
```

## Interface design philosophy
- Since there are a lot of Props, I decided to divide them into three major groups and manage them separately. The first is the React Hook Form Props, which are the main part of this project, the second is the MUI Component Props, and the third is the Props for providing options that the component provider wants to incorporate on their own.
  - The React Hook Form Props are provided by the library as `UseControllerProps`. Since I want this Props to be on the top surface as an interface (not nested), I decided to make the Props of the parts I will create intersect with this type.
  - Some parts require multiple MUI Props. For example, in Autocomplete, we want to be able to pass the internal TextField props (form width, label, etc.) in addition to the props of Autocomplete itself. Since there is a high possibility of conflicts between React Hook Form's props and MUI's props, which have many of the same names (and unintentional conflicts can cause bugs), we separated them from the beginning to eliminate the possibility of creating bugs. We have eliminated the possibility of creating bugs by separating them from the beginning.
  - Props for providing options that you want to incorporate yourself are now grouped into an object and can be passed through config, just like MUI's Props. The `MuiNumberField` config is intersected with `NumberFormatPropsBase`, as I thought it would be semantically better to fit here.

(Writing...)

Articles

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