react-hook-form/devtools

Performant, flexible and extensible forms with easy to use validation.

[![npm downloads](https://img.shields.io/npm/dm/@hookform/devtools.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/devtools) [![npm](https://img.shields.io/npm/dt/@hookform/devtools.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/devtools) [![npm](https://img.shields.io/bundlephobia/minzip/@hookform/devtools?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/devtools)

Goal

This 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 install @hookform/devtools -D

Quickstart

import React from 'react';
import { useForm } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';
import './App.css';

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

  return (
    <>
      <DevTool control={control} placement="top-left" />

      <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>
    </>
  );
};

export default App;

Backers

Thanks goes to all our backers! [Become a backer].

Organizations

Thanks goes to these wonderful organizations! [Contribute].

Contributors

Thanks goes to these wonderful people! [Become a contributor].