How to use react-hook-form

このリポジトリは Zenn の記事 「🪝 react-hook-form の使い方」 と連動したリポジトリです。

🛠️ 開発環境

• Node.js（18.20.4）
• React（^18）
• Next（14.2.5）
• react-hook-form（^7.52.1）
• MUI（5.16.6）

📁 ディレクトリ構成

ディレクトリ名	説明
/basic	react-hook-form の基本的な使い方のみのフォーム
/custom	送信状況や送信結果などを UI に表示したユーザーフレンドリーなフォーム
/mui	MUI(Material UI)と react-hook-form を使ったフォーム
/onsubmit-validate	onSubmit と送信ボタンに disabled を組み合わせた不具合が起きやすいフォーム

🛹 動作方法

1. リポジトリをクローン

git clone https://github.com/twosun-8-git/react-hook-form.git

2. モジュールをインストール

npm i

3. 開発環境を起動

npm run dev

4. http://localhost:3000 にアクセス

📄 関連リポジトリ

• react-hook-from x Zod
• react-hook-form x Yup