docs: remove recently deleted props

Author: crutchcorn

docs/framework/react/quick-start.md

@@ -32,7 +32,12 @@ export default function App() {
           <form.Field
             name="fullName"
             children={(field) => (
-              <input name={field.name} {...field.getInputProps()} />
+              <input
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
             )}
           />
         </div>

docs/guides/basic-concepts.md

@@ -49,7 +49,11 @@ Example:
   name="firstName"
   children={(field) => (
     <>
-      <input {...field.getInputProps()} />
+      <input
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
       <FieldInfo field={field} />
     </>
   )}
@@ -68,12 +72,16 @@ const { value, error, touched, isValidating } = field.state
 
 ## Field API
 
-The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state, such as getInputProps, which returns an object with props needed to bind the field to a form input element.
+The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state.
 
 Example:
 
 ```tsx
-<input {...field.getInputProps()} />
+<input
+  value={field.state.value}
+  onBlur={field.handleBlur}
+  onChange={(e) => field.handleChange(e.target.value)}
+/>
 ```
 
 ## Validation
@@ -92,7 +100,11 @@ Example:
   }}
   children={(field) => (
     <>
-      <input {...field.getInputProps()} />
+      <input
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
       <FieldInfo field={field} />
     </>
   )}
@@ -143,7 +155,12 @@ Example:
                     return (
                       <div>
                         <label htmlFor={field.name}>Name:</label>
-                        <input name={field.name} {...field.getInputProps()} />
+                        <input
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
                         <button
                           type="button"
                           onClick={() => hobbiesField.removeValue(i)}
@@ -162,7 +179,12 @@ Example:
                     return (
                       <div>
                         <label htmlFor={field.name}>Description:</label>
-                        <input name={field.name} {...field.getInputProps()} />
+                        <input
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
                         <FieldInfo field={field} />
                       </div>
                     )
@@ -202,7 +224,12 @@ Example:
     return (
       <div>
         <label htmlFor={field.name}>Name:</label>
-        <input name={field.name} {...field.getInputProps()} />
+        <input
+          name={field.name}
+          value={field.state.value}
+          onBlur={field.handleBlur}
+          onChange={(e) => field.handleChange(e.target.value)}
+        />
         <button type="button" onClick={() => hobbiesField.removeValue(i)}>
           X
         </button>

docs/overview.md

@@ -36,7 +36,7 @@ function FieldInfo({ field }: { field: FieldApi<any, any> }) {
     <>
       {field.state.meta.touchedError ? (
         <em>{field.state.meta.touchedError}</em>
-      ) : null}{' '}
+      ) : null}
       {field.state.meta.isValidating ? 'Validating...' : null}
     </>
   )
@@ -93,7 +93,12 @@ export default function App() {
                 return (
                   <>
                     <label htmlFor={field.name}>First Name:</label>
-                    <input name={field.name} {...field.getInputProps()} />
+                    <input
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
                     <FieldInfo field={field} />
                   </>
                 )
@@ -106,7 +111,12 @@ export default function App() {
               children={(field) => (
                 <>
                   <label htmlFor={field.name}>Last Name:</label>
-                  <input name={field.name} {...field.getInputProps()} />
+                  <input
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
                   <FieldInfo field={field} />
                 </>
               )}

examples/react/simple/src/index.tsx

@@ -8,7 +8,7 @@ function FieldInfo({ field }: { field: FieldApi<any, any> }) {
     <>
       {field.state.meta.touchedError ? (
         <em>{field.state.meta.touchedError}</em>
-      ) : null}{" "}
+      ) : null}
       {field.state.meta.isValidating ? "Validating..." : null}
     </>
   );
@@ -65,7 +65,12 @@ export default function App() {
                 return (
                   <>
                     <label htmlFor={field.name}>First Name:</label>
-                    <input name={field.name} {...field.getInputProps()} />
+                    <input
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
                     <FieldInfo field={field} />
                   </>
                 );
@@ -78,7 +83,12 @@ export default function App() {
               children={(field) => (
                 <>
                   <label htmlFor={field.name}>Last Name:</label>
-                  <input name={field.name} {...field.getInputProps()} />
+                  <input
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
                   <FieldInfo field={field} />
                 </>
               )}

examples/react/simple/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "jsx": "react",
-    "noEmit": true
+    "noEmit": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"]
   },
   "include": ["**/*.ts", "**/*.tsx", ".eslintrc.cjs", "rollup.config.js"]
 }