react-hook-form

https://gyazo.com/192d10f7222d07087d28edf79865a93f

React Hooksを使ったフォームのComponent library

React Nativeでも使える

ドキュメントが日本語対応している

機械翻訳っぽいけど

依存しているライブラリがめちゃ少ない

リンク

website

github

TypeScript実装

react-hook-formのcode reading

exampleが大量に用意されている

react-hook-formでregisterとControllerのどちらを使うか

hooks

Componennts

types

https://zenn.dev/takepepe/articles/rhf-usewatach

https://github.com/react-hook-form/react-hook-form/releases/tag/v7.41.0

7.41.0

values, defaultValues

https://react-hook-form.com/advanced-usage#TestingForm

test

コミュニティが活発なので、めちゃくちゃ詰まったときは

issueかDiscussionsを見ると良い

質問したらすぐに反応してくれて本当に助かったmrsekut.icon

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

2つ以上のsubmitボタンが有る時

https://stackoverflow.com/questions/66176755/react-js-multiple-submit-buttons-react-hook-form

buttonはこれでいいんだけど、validationがきつそうだなmrsekut.icon

下書きボタンと、投稿ボタンとかがあるときに、validationのレベルが異なる仕様の時

自前でvalidationを書かないといけない？

型付け

https://zenn.dev/dqn/articles/59b4f12ad37b6b#解決策

@hookform/devtools

https://react-hook-form.com/jp/dev-tools/

便利

errorの型がおかしい

code:ts

const {　formState: { errors }　} = useFormContext<{ items: PostingItem[] }>();

const error = errors?.items?.message; // ここでtype error

itemsはarrayだが、validationのち方によっては、errors.items.messageに全体のerrorが入る

例えば、「1個以上のアイテムを選択してください」とか

https://youtu.be/ANyzugc62ZY?t=929

#??

react-hook-form-errorこの辺はなに