docs: include key and defaultValue in the integration examples (#642)

edmundhung · May 20, 2024 · c5b6aaf · c5b6aaf
1 parent 09063d6
commit c5b6aaf
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 18 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,9 @@
 singleQuote: true
 useTabs: true
 trailingComma: all
+overrides:
+  - files:
+      - '*.md'
+    options:
+      useTabs: false
+      tabWidth: 2
diff --git a/docs/integration/nextjs.md b/docs/integration/nextjs.md
@@ -13,7 +13,7 @@ export const loginSchema = z.object({
 });
 
 // action.ts
-'use server';
+('use server');
 
 import { redirect } from 'next/navigation';
 import { parseWithZod } from '@conform-to/zod';
@@ -32,7 +32,7 @@ export async function login(prevState: unknown, formData: FormData) {
 }
 
 // form.tsx
-'use client';
+('use client');
 
 import { useForm } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
@@ -53,27 +53,43 @@ export function LoginForm() {
 
     // Validate the form on blur event triggered
     shouldValidate: 'onBlur',
+    shouldRevalidate: 'onInput',
   });
 
   return (
     <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate>
       <div>
         <label>Email</label>
-        <input type="email" name={fields.email.name} />
+        <input
+          type="email"
+          key={fields.email.key}
+          name={fields.email.name}
+          defaultValue={fields.email.initialValue}
+        />
         <div>{fields.email.errors}</div>
       </div>
       <div>
         <label>Password</label>
-        <input type="password" name={fields.password.name} />
+        <input
+          type="password"
+          key={fields.password.key}
+          name={fields.password.name}
+          defaultValue={fields.password.initialValue}
+        />
         <div>{fields.password.errors}</div>
       </div>
       <label>
         <div>
           <span>Remember me</span>
-          <input type="checkbox" name={fields.remember.name} />
+          <input
+            type="checkbox"
+            key={fields.remember.key}
+            name={fields.remember.name}
+            defaultChecked={fields.remember.initialValue === 'on'}
+          />
         </div>
       </label>
-      <Button>Login</Button>
+      <button>Login</button>
     </form>
   );
 }

diff --git a/docs/integration/remix.md b/docs/integration/remix.md
@@ -41,24 +41,40 @@ export default function Login() {
 
     // Validate the form on blur event triggered
     shouldValidate: 'onBlur',
+    shouldRevalidate: 'onInput',
   });
 
   return (
-    <Form method="post" id={form.id} onSubmit={form.onSubmit}>
+    <Form method="post" id={form.id} onSubmit={form.onSubmit} noValidate>
       <div>
         <label>Email</label>
-        <input type="email" name={fields.email.name} />
+        <input
+          type="email"
+          key={fields.email.key}
+          name={fields.email.name}
+          defaultValue={fields.email.initialValue}
+        />
         <div>{fields.email.errors}</div>
       </div>
       <div>
         <label>Password</label>
-        <input type="password" name={fields.password.name} />
+        <input
+          type="password"
+          key={fields.password.key}
+          name={fields.password.name}
+          defaultValue={fields.password.initialValue}
+        />
         <div>{fields.password.errors}</div>
       </div>
       <label>
         <div>
           <span>Remember me</span>
-          <input type="checkbox" name={fields.remember.name} />
+          <input
+            type="checkbox"
+            key={fields.remember.key}
+            name={fields.remember.name}
+            defaultChecked={fields.remember.initialValue === 'on'}
+          />
         </div>
       </label>
       <hr />

diff --git a/docs/ja/integration/nextjs.md b/docs/ja/integration/nextjs.md
@@ -53,27 +53,43 @@ export function LoginForm() {
 
     // blurイベント発生時にフォームを検証する
     shouldValidate: 'onBlur',
+    shouldRevalidate: 'onInput',
   });
 
   return (
     <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate>
       <div>
         <label>Email</label>
-        <input type="email" name={fields.email.name} />
+        <input
+          type="email"
+          key={fields.email.key}
+          name={fields.email.name}
+          defaultValue={fields.email.initialValue}
+        />
         <div>{fields.email.errors}</div>
       </div>
       <div>
         <label>Password</label>
-        <input type="password" name={fields.password.name} />
+        <input
+          type="password"
+          key={fields.password.key}
+          name={fields.password.name}
+          defaultValue={fields.password.initialValue}
+        />
         <div>{fields.password.errors}</div>
       </div>
       <label>
         <div>
           <span>Remember me</span>
-          <input type="checkbox" name={fields.remember.name} />
+          <input
+            type="checkbox"
+            key={fields.remember.key}
+            name={fields.remember.name}
+            defaultChecked={fields.remember.initialValue === 'on'}
+          />
         </div>
       </label>
-      <Button>Login</Button>
+      <button>Login</button>
     </form>
   );
 }

diff --git a/docs/ja/integration/remix.md b/docs/ja/integration/remix.md
@@ -41,24 +41,40 @@ export default function Login() {
 
     // blurイベント発生時にフォームを検証する
     shouldValidate: 'onBlur',
+    shouldRevalidate: 'onInput',
   });
 
   return (
-    <Form method="post" id={form.id} onSubmit={form.onSubmit}>
+    <Form method="post" id={form.id} onSubmit={form.onSubmit} noValidate>
       <div>
         <label>Email</label>
-        <input type="email" name={fields.email.name} />
+        <input
+          type="email"
+          key={fields.email.key}
+          name={fields.email.name}
+          defaultValue={fields.email.initialValue}
+        />
         <div>{fields.email.errors}</div>
       </div>
       <div>
         <label>Password</label>
-        <input type="password" name={fields.password.name} />
+        <input
+          type="password"
+          key={fields.password.key}
+          name={fields.password.name}
+          defaultValue={fields.password.initialValue}
+        />
         <div>{fields.password.errors}</div>
       </div>
       <label>
         <div>
           <span>Remember me</span>
-          <input type="checkbox" name={fields.remember.name} />
+          <input
+            type="checkbox"
+            key={fields.remember.key}
+            name={fields.remember.name}
+            defaultChecked={fields.remember.initialValue === 'on'}
+          />
         </div>
       </label>
       <hr />