π React Final Form Hooks
Installation
npm install --save react-final-form-hooks final-form
or
yarn add react-final-form-hooks final-form
Getting Started
β οΈ This library will re-render your entire form on every state change, as you type. β οΈ
If performance is your goal, you are recommended to use
Here's what it looks like in your code:
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>
)
}
Table of Contents
Examples
Simple Example
Shows how to create fields and attach them to <input/>
elements.
API
The following can be imported from react-final-form-hooks
.
useField
Returns an object similar to FieldRenderProps
.
useForm
Returns an object similar to FormRenderProps
.
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers!
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]