Skip to content

Commit

Permalink
Update md file by adding a simple example
Browse files Browse the repository at this point in the history
  • Loading branch information
EZZAHED committed Oct 17, 2021
1 parent 3e0c032 commit 557ef29
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions docs/api/useField.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,41 @@ An object that looks just like [`FieldProps`](../types/FieldProps), except witho
`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.

`useField()` is used internally inside [`<Field/>`](Field).


## Example

```ts
import { useForm, useField } from 'react-final-form-hooks'

const MyForm = () => {
const { form, handleSubmit, values, pristine, submitting } = useForm({
onSubmit, // the function to call with your form values upon valid submit
validate // a record-level validation function to check all form values
})
const firstName = useField('firstName', form)
const lastName = useField('lastName', form)
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<input {...firstName.input} placeholder="First Name" />
{firstName.meta.touched && firstName.meta.error && (
<span>{firstName.meta.error}</span>
)}
</div>
<div>
<label>Last Name</label>
<input {...lastName.input} placeholder="Last Name" />
{lastName.meta.touched && lastName.meta.error && (
<span>{lastName.meta.error}</span>
)}
</div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
</form>
)
}

```

0 comments on commit 557ef29

Please sign in to comment.