Skip to content

Commit 557ef29

Browse files
authored
Update md file by adding a simple example
the example is copied form here https://github.com/final-form/react-final-form-hooks
1 parent 3e0c032 commit 557ef29

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

docs/api/useField.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,41 @@ An object that looks just like [`FieldProps`](../types/FieldProps), except witho
3636
`useField()` returns [`FieldRenderProps`](../types/FieldRenderProps). It will manage the rerendering of any component you use it in, i.e. the component will only rerender if the field state subscribed to via `useField()` changes.
3737

3838
`useField()` is used internally inside [`<Field/>`](Field).
39+
40+
41+
## Example
42+
43+
```ts
44+
import { useForm, useField } from 'react-final-form-hooks'
45+
46+
const MyForm = () => {
47+
const { form, handleSubmit, values, pristine, submitting } = useForm({
48+
onSubmit, // the function to call with your form values upon valid submit
49+
validate // a record-level validation function to check all form values
50+
})
51+
const firstName = useField('firstName', form)
52+
const lastName = useField('lastName', form)
53+
return (
54+
<form onSubmit={handleSubmit}>
55+
<div>
56+
<label>First Name</label>
57+
<input {...firstName.input} placeholder="First Name" />
58+
{firstName.meta.touched && firstName.meta.error && (
59+
<span>{firstName.meta.error}</span>
60+
)}
61+
</div>
62+
<div>
63+
<label>Last Name</label>
64+
<input {...lastName.input} placeholder="Last Name" />
65+
{lastName.meta.touched && lastName.meta.error && (
66+
<span>{lastName.meta.error}</span>
67+
)}
68+
</div>
69+
<button type="submit" disabled={pristine || submitting}>
70+
Submit
71+
</button>
72+
</form>
73+
)
74+
}
75+
76+
```

0 commit comments

Comments
 (0)