LukeParke/form
1
0
Fork 0
mirror of https://github.com/LukeHagar/form.git synced 2025-12-06 04:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: remove recently deleted props

Browse Source
This commit is contained in:
Corbin Crutchley
2023-09-03 01:37:46 -07:00
committed by Corbin Crutchley
parent 7980336d03
commit eea47f03dc
5 changed files with 68 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/framework/react/quick-start.md
View File

@@ -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>

41
docs/guides/basic-concepts.md
View File

@@ -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>

16
docs/overview.md
View File

@@ -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} />
</>
)}

16
examples/react/simple/src/index.tsx
View File

@@ -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} />
</>
)}

3
examples/react/simple/tsconfig.json
View File

@@ -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"]
}