My custom react-hook-form devtool for debuggins

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