React Hooks to bind to 🏁 Final Form's high performance subscription-based form state management engine
Switch branches/tags
Nothing to show
Clone or download

README.md

🏁 React Final Form Hooks

React Final Form Hooks

Backers on Open Collective Sponsors on Open Collective NPM Version NPM Downloads Build Status codecov.io styled with prettier

βœ… Zero dependencies

βœ… Only peer dependencies: React and 🏁 Final Form

βœ… Opt-in subscriptions - only update on the state you need!

βœ… πŸ’₯ 843 bytes gzipped πŸ’₯


πŸ‘¨β€πŸ”¬ EXPERIMENTAL πŸ‘©β€πŸ”¬

Need I say this? The React Hooks API is still very experimental and not recommended for production code.

Installation

npm install --save react-final-form-hooks final-form

or

yarn add react-final-form-hooks final-form

Getting Started

🏁 React Final Form Hooks is the leanest possible way to connect 🏁 Final Form to React, to acheive subscriptions-based form state management using the Observer pattern.

⚠️ 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 🏁 React Final Form. Also, that library does many other things for you, like managing checkbox and radio buttons properly. RFFHooks leaves all of that work to you. By default, 🏁 React Final Form Hooks subscribes to all changes, but if you want to fine tune your form, you may specify only the form state that you care about for rendering your gorgeous UI.

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! πŸ™ [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]