コンテンツへスキップ

DevTools

React Hook Form のバリデーション付きフォームのデバッグを支援する DevTools です。

React Hook Form DevTools

機能

Reactベース

DevTool自体がReactで構築されているため、Reactアプリケーションに簡単に統合できます。

</>

DX

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

オープンソース

DevToolsはオープンソースプロジェクトであるため、誰もが協力してエクスペリエンスを向上させることができます。

</> インストール

ステップ 1：インストール @hookform/devtoolsを開発依存パッケージとしてインストールします。

npm install -D @hookform/devtools

ステップ 2：Reactアプリケーションへの統合は、コンポーネントをApp/Formレンダリングにインポートして渡すだけで簡単です。 controlプロパティを渡します。

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リポジトリ

例

機能

  • 入力とフォームの状態全体を読み取ります。

  • 注意：RHFは非制御入力に基づいているため、更新ボタンをクリックすると、DevToolが更新され、最新の入力値とフォームの状態が読み取られます。

  • 入力またはフォームが有効か無効かを視覚的にフィードバックします。

  • 登録された入力とカスタム登録されたコンポーネントを検索します。

  • 注意：Nativeボタンをクリックすると、入力を簡単に見つけることができます。これは、大きなフォームを操作している場合に役立ちます。

編集