[v2] chore(examples): devtools and StrictMode in every React example

examples/react/array/src/index.tsx

@@ -3,7 +3,7 @@ import { useForm } from '@tanstack/react-form'
 import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import { useMemo, useRef, useState } from 'react'
+import { StrictMode, useMemo, useRef, useState } from 'react'
 
 function ArrayForm({ items }: { items: Array<string> }) {
   const form = useForm({
@@ -120,4 +120,8 @@ function App() {
   )
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

examples/react/basic-splitting-form/src/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { useForm } from '@tanstack/react-form'
 import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
@@ -58,4 +59,8 @@ function App() {
   )
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

examples/react/basic/src/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { useForm } from '@tanstack/react-form'
 import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
@@ -139,4 +140,8 @@ function App() {
   )
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

examples/react/compiler/package.json

@@ -9,7 +9,9 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-form": "^2.0.0-alpha.2",
+    "@tanstack/react-form-devtools": "^1.0.0-alpha.2",
     "react": "19.2.8",
     "react-dom": "19.2.8"
   },

examples/react/compiler/src/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { useForm } from '@tanstack/react-form'
 
 import type { AnyFieldApi } from '@tanstack/react-form'
@@ -131,5 +133,10 @@ const rootElement = document.getElementById('root')!
 createRoot(rootElement).render(
   <React.StrictMode>
     <App />
+
+    <TanStackDevtools
+      config={{ hideUntilHover: false }}
+      plugins={[formDevtoolsPlugin()]}
+    />
   </React.StrictMode>,
 )

examples/react/expo/index.ts

@@ -1,5 +1,10 @@
+import { StrictMode, createElement } from 'react'
 import { registerRootComponent } from 'expo'
 
 import App from './app/index'
 
-registerRootComponent(App)
+function Root() {
+  return createElement(StrictMode, null, createElement(App))
+}
+
+registerRootComponent(Root)

examples/react/field-groups/src/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { useForm } from '@tanstack/react-form'
 import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
@@ -143,4 +144,8 @@ function App() {
   )
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

examples/react/large-form/src/index.tsx

@@ -13,7 +13,7 @@ createRoot(rootElement).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true }}
+      config={{ hideUntilHover: false }}
       plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,

examples/react/multi-step-wizard/src/index.tsx

@@ -13,7 +13,7 @@ createRoot(rootElement).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true }}
+      config={{ hideUntilHover: false }}
       plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,

examples/react/next-server-actions-zod/package.json

@@ -8,7 +8,9 @@
     "_test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-form": "^2.0.0-alpha.2",
+    "@tanstack/react-form-devtools": "^1.0.0-alpha.2",
     "@tanstack/react-form-nextjs": "^2.0.0-alpha.2",
     "next": "16.3.0",
     "react": "19.2.8",

examples/react/next-server-actions-zod/src/app/devtools.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+
+export function Devtools() {
+  return (
+    <TanStackDevtools
+      plugins={[formDevtoolsPlugin()]}
+      config={{
+        hideUntilHover: false,
+      }}
+    />
+  )
+}

examples/react/next-server-actions-zod/src/app/page.tsx

@@ -1,9 +1,11 @@
 import { ClientComp } from './client-component'
+import { Devtools } from './devtools'
 
 export default function Home() {
   return (
     <>
       <ClientComp />
+      <Devtools />
     </>
   )
 }

examples/react/next-server-actions/package.json

@@ -8,7 +8,9 @@
     "_test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-form": "^2.0.0-alpha.2",
+    "@tanstack/react-form-devtools": "^1.0.0-alpha.2",
     "@tanstack/react-form-nextjs": "^2.0.0-alpha.2",
     "next": "16.3.0",
     "react": "19.2.8",

examples/react/next-server-actions/src/app/devtools.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+
+export function Devtools() {
+  return (
+    <TanStackDevtools
+      plugins={[formDevtoolsPlugin()]}
+      config={{
+        hideUntilHover: false,
+      }}
+    />
+  )
+}

examples/react/next-server-actions/src/app/page.tsx

@@ -1,9 +1,11 @@
 import { ClientComp } from './client-component'
+import { Devtools } from './devtools'
 
 export default function Home() {
   return (
     <>
       <ClientComp />
+      <Devtools />
     </>
   )
 }

examples/react/nextjs/next.config.ts

@@ -1,5 +1,7 @@
 import type { NextConfig } from 'next'
 
-const nextConfig: NextConfig = {/* config options here */}
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+}
 
 export default nextConfig

examples/react/query-integration/src/index.tsx

@@ -16,7 +16,7 @@ createRoot(rootElement).render(
     </QueryClientProvider>
 
     <TanStackDevtools
-      config={{ hideUntilHover: true }}
+      config={{ hideUntilHover: false }}
       plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,

examples/react/simple/src/index.tsx

@@ -135,7 +135,7 @@ createRoot(rootElement).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true }}
+      config={{ hideUntilHover: false }}
       plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,

examples/react/ui-integration-dnd-kit/src/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { createRoot } from 'react-dom/client'
@@ -25,4 +26,8 @@ function App() {
   )
 }
 
-createRoot(document.getElementById('root')!).render(<App />)
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

examples/react/ui-integration-shadcn/src/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 import { TanStackDevtools } from '@tanstack/react-devtools'
@@ -20,4 +21,8 @@ function App() {
   )
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)