Goal

This is my custom React Component will help you to debug forms when working React Hook Form, and give you more insight about your form's detail.

Install

$ npm i -d @leesf/rhf-devtool-react

Quickstart

import React from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import { DevTool } from '@leesf/rhf-devtool-react';
import './App.css';

// using useForm
const App = () => {
  const { register, control, handleSubmit } = useForm({
    mode: 'onChange',
  });

  return (
    <>
      <DevTool control={control} />

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

        <label>Test</label>
        <input name="test" ref={register} />

        <input type="submit" />
      </form>
    </>
  );
};

// or using FormProvider
const App = () => {
  const methods = useForm({
    mode: 'onChange',
  });
  const { register, control, handleSubmit } = methods

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

        <label>Test</label>
        <input name="test" ref={register} />

        <input type="submit" />
      </form>
    <FormProvider>
  );
};

Todo:

Development

• [ ] Add unit, integrated and e2e tests
• [ ] Add CI/CD automation workflow for publishing

Doc

• [ ] Add acknowledgements (react-hook-form, tsdown)

Feature

• [ ] Add devtool for react native rozenite plugin
• [ ] Add position method
• [ ] Add toggle to expand all field section
• [ ] Export custom hooks for other customizability