@formsignals/dev-tools-react NPM

A React component containing the dev tools for the React binding of Form Signals.

Features

TypeScript - Written in TypeScript with full type support for optimal DX.
Reactivity - Reactivity without abstractions thanks to Preact Signals.
Validation - Built-in validation support, including adapters for validation schema libraries.
Transformations - Transform values for the specific needs of your input fields.
Field Groups - Group fields together to manage parts of a form independently.
Async Data - Easily manage async initialisation, validation and submission.
Arrays + Dynamic Objects - Utilize arrays and dynamic objects within your forms.
React - React bindings for easy integration with React.
Dev Tools - Offers a dev tools component to debug your forms.

Install

npm install @formsignals/dev-tools-react

If you have not installed the React bindings of the form library, check out @formsignals/form-react installation.

Quickstart

Just add the FormDevTools component to your React app within the FormProvider you want to debug.

import { useForm } from '@formsignals/form-react';
import { FormDevTools } from '@formsignals/dev-tools-react';

export default function App() {
  const form = useForm()

  return (
    <form.FormProvider>
      <FormDevTools />
      {/* Your app here */}
    </form.FormProvider>
  );
}