Skip to content
A collection of components to listen to 🏁 React Final Form fields
Branch: master
Clone or download
Latest commit 8e95b2d Feb 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
src Upgraded deps Feb 7, 2019
.babelrc
.eslintignore
.eslintrc
.flowconfig
.gitignore
.prettierrc Initial commit Mar 22, 2018
.travis.yml Initial commit Mar 22, 2018
LICENSE Initial commit Mar 22, 2018
README.md
package-lock.json
package-scripts.js Initial commit Mar 22, 2018
package.json
rollup.config.js Upgraded deps Feb 7, 2019

README.md

🏁 React Final Form Listeners

NPM Version NPM Downloads Build Status codecov.io


🏁 React Final Form Listeners is a collection of useful components for listening to fields in a 🏁 React Final Form.

Installation

npm install --save react-final-form-listeners react-final-form final-form

or

yarn add react-final-form-listeners react-final-form final-form

Usage

import { Form, Field } from 'react-final-form'
import { OnChange } from 'react-final-form-listeners'

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            <Field name="foo" component="input" type="checkbox" /> Turn foo on?
          </label>
          <OnChange name="foo">
            {(value, previous) => {
              // do something
            }}
          </OnChange>
        </div>
        ...
      </form>
    )}
  />
)

Table of Contents

Components

The following can be imported from react-final-form-listeners.

ExternallyChanged

Renders is render prop with a boolean flag when the specified field was last updated externally (changed while not active).

name : String

The name of the field to listen to.

children: (externallyChanged: boolean) => React.Node

A render prop given the boolean flag.

OnBlur

Calls its children callback whenever the specified field is blurred. It renders nothing.

name : String

The name of the field to listen to.

children: () => void

A function that will be called whenever the specified field is blurred.

OnChange

Calls its children callback whenever the specified field changes. It renders nothing.

name : String

The name of the field to listen to.

children: (value: any, previous: any) => void

A function that will be called whenever the specified field is blurred. It is passed the new value and the previous value.

OnFocus

Calls its children callback whenever the specified field becomes active. It renders nothing.

name : String

The name of the field to listen to.

children: () => void

A function that will be called whenever the specified field becomes active.

You can’t perform that action at this time.