最近勉強会でMUIとReact-hook-formをテーマに発表したので、まとめていきます。
今回は最小単位のinputコンポーネントを作り、それを他で再利用してコンポーネントを作っていけるようにしましょう。
useController
公式文書のquick startの紹介では、react-hook-formではregisterを通じてinputを使用することになっています。しかし、react-hook-formが非制御コンポーネント方式であるだけに、通常制御コンポーネント方式を使用するUIライブラリであるMUIと相互利用するには、曖昧な部分がありました。
そのため、react-hook-formではControllerというものを提供しています。
公式文書でも示されていますが、再利用可能なcontrolled inputを作成するのに便利です。
公式文書の例を見る
例を先に見てみると、InputコンポーネントのpropsでFormValues typeを渡していることがわかります。
つまり、TypeScriptでそのコンポーネントを実装するには、次のような構成にする必要がありました。
しかし、このように構成すれば、再利用性があるとはいえません。
毎回 form によってそれぞれ Input コンポーネントを作成して FormValues を渡さなければならないからです。
これを解決するために、Typescriptのジェネリックを活用する必要がありそうでした。
一度UseControllerPropsがどのように宣言されているかを確認してみましょう。
再利用可能にする
必要なタイプを見つけたので、今、対応するTypeをインポートします。
作成したコンポーネントの使用
useControllerを活用すると、直接Controllerで包むよりもコードの読みやすさが良くなりました。
register の代わりにcontroller を活用すれば、 rules を除いた error に対するハンドリングも、あえて form を使用するコンポーネントで作成する必要がなくなりました。
nameとcontrolを渡してあげれば、UIコンポーネントの入力も取得できました。
結果
validationも正常に動作し、submit関数もよく実行されることがわかります。
これらでコンポーネントを作成するプロセスが完了です。
あとはstorybookでテストしてみました。
みなさんもぜひ試してみてください。