FormikとReact Hook Formを実装してみる

必要パッケージのインストール

• yarn add formik yup
• yarn add -D @types/yup

2021/01/05現在 下記のバージョンがaddされる
"formik": "2.2.6"
"yup": "0.32.8"
"@types/yup": "0.29.11"

子コンポーネントをインポートしているコンポーネントをstorybookで描画するとimportでエラー出るのでstorybookのmain.jsのwebpackFinalに設定追加した

baseConfig.resolve.modules = [
      path.resolve(__dirname, '..', 'src'),
      'node_modules',
    ]

https://github.com/storybookjs/storybook/issues/11639#issuecomment-689835701

yupのエラーメッセージをカスタムにする場合のsetLocalの時のプロパティはこれ
また、これはバリデーションのルール一覧でもある

https://github.com/jquense/yup#api

setLocale({
  mixed: {
    required: () => `入力必須項目です。`,
  },
})

必要なパッケージのインストール

• yarn add react-hook-form @hookform/resolvers

2021/01/08現在 下記のバージョンがaddされる
"react-hook-form": "6.14.0"
"@hookform/resolvers": "1.3.2"

refにregisterを突っ込むことで入力をreact-hook-form側でステート管理ができる感じかな
registerの引数にreact-hook-formでビルトインのバリデーションを突っ込める感じ？

registerの型はこれでいいのかな
register: (Ref, RegisterOptions?) => void

checkboxやradioをatomsのコンポーネントとして分けた時に
registerをpropに渡したい
からregisterの型が知りたい

うーん
いったんanyでいっか