chore: format

Author: Pyrax

bun.lock

@@ -8,7 +8,7 @@
     "build": "bun run --cwd packages/react-netlify-forms build",
     "dev": "bun run --cwd packages/docs dev",
     "lint": "biome check",
-    "format": "biome format --write .",
+    "format": "biome check --write .",
     "docs:dev": "bun run --cwd packages/docs dev",
     "docs:build": "bun run --cwd packages/docs build",
     "docs:preview": "bun run --cwd packages/docs preview"

package.json

@@ -1,7 +1,9 @@
 // @ts-check
-import { defineConfig } from 'astro/config'
-import starlight from '@astrojs/starlight'
+
 import mdx from '@astrojs/mdx'
+import react from '@astrojs/react'
+import starlight from '@astrojs/starlight'
+import { defineConfig } from 'astro/config'
 import starlightThemeRapide from 'starlight-theme-rapide'
 
 // https://astro.build/config
@@ -16,6 +18,7 @@ export default defineConfig({
         src: './src/assets/logo.png',
         alt: 'react-netlify-forms'
       },
+      favicon: '/favicon.png',
       social: [
         {
           icon: 'github',
@@ -28,11 +31,13 @@ export default defineConfig({
           label: 'Examples',
           autogenerate: { directory: 'examples' }
         },
+        { slug: 'playground' },
         { slug: 'reference' },
         { slug: 'license' }
       ]
     }),
-    mdx()
+    mdx(),
+    react()
   ],
   site: 'https://pyrax.github.io/react-netlify-forms',
   base: '/react-netlify-forms'

packages/docs/astro.config.mjs

@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "@astrojs/mdx": "^4.3.0",
+    "@astrojs/react": "^4.3.0",
     "@astrojs/starlight": "^0.34.3",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "astro": "^5.6.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-live": "^4.1.8",
     "react-netlify-forms": "workspace:*",
     "sharp": "^0.32.5",
     "starlight-theme-rapide": "^0.5.1"

packages/docs/package.json

@@ -0,0 +1,16 @@
+import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'
+import * as components from 'react-netlify-forms'
+
+interface LiveCodeProps {
+  code: string
+}
+
+export default function LiveCode({ code }: LiveCodeProps) {
+  return (
+    <LiveProvider code={code.trim()} scope={{ ...components }}>
+      <LiveEditor />
+      <LivePreview />
+      <LiveError />
+    </LiveProvider>
+  )
+}

packages/docs/src/components/LiveCode.tsx

@@ -1,5 +1,5 @@
 ---
-title: Contact Form Example
+title: Contact Form
 ---
 
 ## Get started

packages/docs/src/content/docs/examples/contact-form.mdx

@@ -1,5 +1,5 @@
 ---
-title: Formik Newsletter Example
+title: Formik Newsletter
 ---
 
 In this example we will create a simple newsletter signup form with Formik. It only includes an email field which is validated client-side (note: client-side validation is not safe, thus you might see data other than emails in Netlify).

packages/docs/src/content/docs/examples/formik.mdx

@@ -1,5 +1,5 @@
 ---
-title: react-hook-form Example
+title: react-hook-form
 ---
 
 In this example we will create a simple newsletter signup form with react-hook-form. It only includes an email field which is validated client-side (note: client-side validation is not safe, thus you might see data other than emails in Netlify).

packages/docs/src/content/docs/examples/react-hook-form.mdx

@@ -1,5 +1,5 @@
 ---
-title: reCAPTCHA Example
+title: reCAPTCHA
 description: Contact form with invisible reCAPTCHA
 ---
 

packages/docs/src/content/docs/examples/recaptcha.mdx

@@ -0,0 +1,69 @@
+---
+title: Playground
+sidebar:
+  badge: Live
+---
+
+import LiveCode from '../../components/LiveCode'
+
+This is a playground for the react-netlify-forms library. Try to edit the code below and see the changes in the preview.
+
+<LiveCode client:idle code={`
+<NetlifyForm
+  name='Contact'
+  action='/thanks'
+  honeypotName='bot-field'
+  onSuccess={(response, context) => {
+    console.log('Successfully sent form data to Netlify Server')
+    context.formRef.current.reset()
+  }}
+>
+  {({ handleChange, success, error }) => (
+    <>
+      <Honeypot />
+      {success && (
+        <p>
+          Thanks for contacting us!
+        </p>
+      )}
+      {error && (
+        <p>
+          Sorry, we could not reach servers. Because it only works on Netlify,
+          our GitHub demo does not provide a response.
+        </p>
+      )}
+      <div>
+        <label htmlFor='name'>
+          Name:
+        </label>
+        <input
+          type='text'
+          name='name'
+          id='name'
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <label htmlFor='message'>
+          Message:
+        </label>
+        <textarea
+          type='text'
+          name='message'
+          id='message'
+          rows='4'
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <button type='submit'>
+          Submit
+        </button>
+        <button type='reset'>
+          Reset
+        </button>
+      </div>
+    </>
+  )}
+</NetlifyForm>
+`} />