Skip to content

feat(rhf-plugin): implement new plugin#258

Merged
V3RON merged 14 commits into
mainfrom
feat/react-hook-form-plugin
May 11, 2026
Merged

feat(rhf-plugin): implement new plugin#258
V3RON merged 14 commits into
mainfrom
feat/react-hook-form-plugin

Conversation

@V3RON
Copy link
Copy Markdown
Contributor

@V3RON V3RON commented May 11, 2026

Summary

  • Adds @rozenite/react-hook-form-plugin — a new Rozenite plugin that exposes React Hook Form state to the DevTools panel in real time
  • RN-side hook useRozeniteRHFPlugin({ control, id? }) subscribes to form state via useFormState + useWatch, flattens nested fields using adapted logic from @hookform/devtools, and streams snapshots over plugin-bridge
  • DevTools panel displays field values, native input type, dirty/touched state, error type + message, and form-level status flags with live field search and collapsible nested field groups
  • Multiple simultaneous forms supported; custom form IDs shown in the selector, React auto-generated IDs shown as "Form N"
  • Stale indicator when a form component unmounts (hook sends an unmount event on cleanup)
  • Playground demo screen with two forms (profile with nested address fields, login) to exercise all features

Test plan

  • Start playground, open "React Hook Form" from the landing screen
  • Open Rozenite DevTools → "React Hook Form" panel
  • Type into profile form fields — values, dirty and touched state update live
  • Submit with invalid data — error type and message appear per field
  • Expand/collapse the address group in the DevTools panel
  • Switch to the Login form tab — use the form selector dropdown to switch between forms
  • Navigate away from the screen — selected form shows as disconnected
  • Return to the screen — form reconnects and stale indicator clears

V3RON added 8 commits May 11, 2026 08:18
New @rozenite/react-hook-form-plugin package that integrates with
react-hook-form's control API to expose form state to the Rozenite
DevTools panel in real time.

- Adapts data extraction logic from @hookform/devtools (nestToFlat,
  proxyToObject, control._names.mount) to work with plugin-bridge
  instead of window.postMessage
- Supports multiple simultaneous forms via form ID
- DevTools panel shows field values, dirty/touched/error state, and
  form-level status (isValid, submitCount, etc.) with live search
- Playground demo screen with two forms (profile + login) to test
@vercel
Copy link
Copy Markdown

vercel Bot commented May 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
rozenite Skipped Skipped May 11, 2026 11:43am

Request Review

@V3RON V3RON changed the title feat: react-hook-form plugin feat(react-hook-form-plugin): implement new plugin May 11, 2026
@V3RON V3RON changed the title feat(react-hook-form-plugin): implement new plugin feat(rhf-plugin): implement new plugin May 11, 2026
@V3RON V3RON force-pushed the feat/react-hook-form-plugin branch from 5e3b9cf to 374c687 Compare May 11, 2026 11:36
@V3RON V3RON force-pushed the feat/react-hook-form-plugin branch from 374c687 to fa72138 Compare May 11, 2026 11:42
@V3RON V3RON force-pushed the feat/react-hook-form-plugin branch from fa72138 to 16f4c15 Compare May 11, 2026 11:43
@V3RON V3RON merged commit cbdc776 into main May 11, 2026
6 checks passed
@V3RON V3RON deleted the feat/react-hook-form-plugin branch May 11, 2026 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant