Skip to content

DevTools

React Hook Form DevTools を使用してバリデーション付きフォームのデバッグを支援します。

React Hook Form DevTools

特徴

React ベース

DevTools は React を使用して構築されているため、React アプリケーションと簡単に統合できます。

</>

DX

React Hook Form は React を使用してフォームを構築する際に優れたエクスペリエンスを提供することに焦点を当てています。このツールはフォームのデバッグに役立ちます。

オープンソース

DevTools はオープンソースプロジェクトのため、私たち全員が一緒にエクスペリエンスを改善できます。

</> インストール

ステップ1: devDependencies パッケージとして @hookform/devtools をインストールします。

npm install @hookform/devtools

ステップ2: React アプリケーションとの統合は、アプリケーション・フォームに DevTool コンポーネントをインポートし、そのコンポーネントに control prop を渡すだけです。

import { useForm } from "react-hook-form";
import { DevTool } from "@hookform/devtools";

export default () => {
  const { register, control, handleSubmit } = useForm({
    mode: "onChange",
  });

  return (
    <>
      <form onSubmit={handleSubmit(d => console.log(d))}>
        <h1>React Hook Form DevTools</h1>

        <label>Test</label>
        <input {...register("test")} />

        <input type="submit" />
      </form>
      
      <DevTool control={control} /> {/* set up the dev tool */}
    </>
  );
};

ライブデモ

次のデモを操作して、DevToolの動作を確認できます。

GitHub Repo

Example

機能性

  • input およびフォーム全体の状態を読み取ります。

  • 注意: RHF は非制御コンポーネントに基づいているため、Update ボタンは DevTool をリフレッシュして最新の入力値とフォームの状態を読み取ります。

  • input またはフォームが有効または無効な場合に視覚的なフィードバックを提供します。

  • 登録済みの input およびカスタム登録済みコンポーネントを検索できます。

  • 注意: Native ボタンをクリックするとその input までスクロールされるため、フォーム内から input を簡単に探すことができます。これは、大規模なフォームで作業するときに便利です。

■ RHF DevTools

Edit