fix: form id ssr error (#160)

* fix: form id ssr error

* feat: add custom id field

* feat: add multiple form example

- Update example navigation style

* fix: make uuid outside hook to avoid generating every render

* fix: generate uuid in devtool component

Author: jsun969

example/src/App.css

@@ -100,19 +100,24 @@ input[type='submit'] {
 }
 
 .App {
-  max-width: 600px;
+  max-width: 660px;
   margin: 0 auto;
   height: 100vh;
 }
 
+nav {
+  margin-top: 20px;
+}
+
 nav > a {
   appearance: none;
-  margin-top: 40px;
-  border: 1px solid #333;
-  margin-bottom: 20px;
+  text-decoration: inherit;
   text-transform: uppercase;
-  padding: 10px 20px;
+  color: white;
+  border: 1px solid white;
   border-radius: 4px;
+  padding: 10px 20px;
+  margin-inline: 4px;
 }
 
 button[type='button'] {

example/src/App.tsx

@@ -1,77 +1,43 @@
-import type { PLACEMENT } from '../../src/devTool';
-import { DevTool } from '../../src/devTool';
 import React from 'react';
-import { useForm } from 'react-hook-form';
 import { Link, Route, Routes, useParams } from 'react-router-dom';
+import { PLACEMENT } from '../../src/position';
 import './App.css';
+import Form1 from './forms/Form1';
+import Form2 from './forms/Form2';
 
-const Form: React.FC = () => {
+const Page: React.FC<{ multiple?: boolean }> = ({ multiple }) => {
   const params = useParams();
-
-  const { register, control, handleSubmit } = useForm<{
-    firstName: string;
-    lastName: string;
-    custom: string;
-    ha: {
-      test: string;
-    };
-  }>({
-    mode: 'onChange',
-    defaultValues: {
-      firstName: '',
-      lastName: '',
-      ha: {
-        test: '',
-      },
-    },
-  });
-
-  React.useEffect(() => {
-    register('custom');
-  }, [register]);
-
   return (
     <>
-      <form onSubmit={handleSubmit((data) => data)}>
-        <h1>
-          <span role="img" aria-label="devTool">
-            🔧
-          </span>{' '}
-          DevTools
-        </h1>
-        <p style={{ textAlign: 'center' }}>
-          React Hook Form DevTools to help debug forms.
-        </p>
-        <label>First Name</label>
-        <input {...register('firstName', { required: true })} />
-        <input {...register('ha.test', { required: true })} />
-
-        <label>Last Name</label>
-        <input {...register('lastName', { required: true })} />
-
-        <input style={{ fontWeight: 400 }} type="submit" />
-      </form>
-
-      <DevTool
-        control={control}
-        placement={(params?.placement as PLACEMENT) ?? 'top-right'}
-      />
+      <h1>
+        <span role="img" aria-label="devTool">
+          🔧
+        </span>{' '}
+        DevTools
+      </h1>
+      <p style={{ textAlign: 'center' }}>
+        React Hook Form DevTools to help debug forms.
+      </p>
+      <Form1 placement={params?.placement as PLACEMENT} />
+      {multiple && <Form2 />}
     </>
   );
 };
 
-const App = () => {
+const App: React.FC = () => {
   return (
     <div className="App">
       <nav>
         <Link to="/">Default</Link>
         <Link to="placement/top-left">Top Left</Link>
         <Link to="placement/bottom-left">Bottom Left</Link>
         <Link to="placement/bottom-right">Bottom Right</Link>
+        <Link to="multiple">Multiple</Link>
       </nav>
       <Routes>
-        <Route path="/" element={<Form />} />
-        <Route path="placement/:placement" element={<Form />} />
+        <Route path="/" element={<Page />} />
+        <Route path="placement/:placement" element={<Page />} />
+        <Route path="multiple" element={<Page multiple />} />
       </Routes>
     </div>
   );

example/src/forms/Form1.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { DevTool, PLACEMENT } from '../../../src/devTool';
+
+const Form1: React.FC<{ placement: PLACEMENT }> = ({ placement }) => {
+  const { register, control, handleSubmit } = useForm<{
+    firstName: string;
+    lastName: string;
+    custom: string;
+    ha: {
+      test: string;
+    };
+  }>({
+    mode: 'onChange',
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      ha: {
+        test: '',
+      },
+    },
+  });
+
+  React.useEffect(() => {
+    register('custom');
+  }, [register]);
+
+  return (
+    <>
+      <form onSubmit={handleSubmit((data) => data)}>
+        <label>First Name</label>
+        <input {...register('firstName', { required: true })} />
+        <input {...register('ha.test', { required: true })} />
+
+        <label>Last Name</label>
+        <input {...register('lastName', { required: true })} />
+
+        <input style={{ fontWeight: 400 }} type="submit" />
+      </form>
+
+      <DevTool
+        id="form1"
+        control={control}
+        placement={placement ?? 'top-right'}
+      />
+    </>
+  );
+};
+
+export default Form1;

example/src/forms/Form2.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { DevTool } from '../../../src/devTool';
+
+const Form2: React.FC = () => {
+  const { control, handleSubmit, register } = useForm({
+    defaultValues: { lol: '', olo: '' },
+  });
+
+  return (
+    <>
+      <form onSubmit={handleSubmit((data) => data)}>
+        <input {...register('lol', { required: true })} />
+        <input {...register('olo', { required: true })} />
+        <input style={{ fontWeight: 400 }} type="submit" />
+      </form>
+      <DevTool control={control} />
+    </>
+  );
+};
+
+export default Form2;

src/devTool.tsx

@@ -1,6 +1,7 @@
 import { createStore, StateMachineProvider } from 'little-state-machine';
 import * as React from 'react';
 import { Control, FieldValues, useFormContext } from 'react-hook-form';
+import { v4 as generateUUID } from 'uuid';
 import { DevToolUI } from './devToolUI';
 import { useExportControlToExtension } from './extension/useExportControlToExtension';
 import type { PLACEMENT } from './position';
@@ -21,14 +22,18 @@ if (typeof window !== 'undefined') {
 }
 
 export const DevTool = <T extends FieldValues>(props?: {
+  id?: string;
   control?: Control<T>;
   placement?: PLACEMENT;
 }) => {
   const methods = useFormContext();
 
-  const { isExtensionEnabled } = useExportControlToExtension(
-    props?.control ?? methods.control,
-  );
+  const uuid = React.useMemo(() => generateUUID(), []);
+
+  const { isExtensionEnabled } = useExportControlToExtension({
+    id: props?.id ?? uuid,
+    control: props?.control ?? methods.control,
+  });
   if (isExtensionEnabled) {
     return null;
   }

src/extension/useExportControlToExtension.ts

@@ -2,13 +2,16 @@ import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { Control, useFormState, useWatch } from 'react-hook-form';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { v4 as uuid } from 'uuid';
 import { MessageData, UpdatePayload } from './types';
 import { nestToFlat, proxyToObject } from './utils';
 
-const id = uuid();
-
-export function useExportControlToExtension(control: Control<any>) {
+export function useExportControlToExtension({
+  id,
+  control,
+}: {
+  id: string;
+  control: Control<any>;
+}) {
   const nestedFormValues = useWatch({ control });
   const formState = useFormState({ control });