🏁 React Final Form Listeners

---

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

Installation

1npm install --save @emekalites/react-final-form-listeners react-final-form final-form

or

1yarn add @emekalites/react-final-form-listeners react-final-form final-form

Usage

1import { Form, Field } from 'react-final-form'
2import { OnChange } from '@emekalites/react-final-form-listeners'
3
4const MyForm = () => (
5  <Form
6    onSubmit={onSubmit}
7    render={({ handleSubmit, pristine, invalid }) => (
8      <form onSubmit={handleSubmit}>
9        <div>
10          <label>
11            <Field name="foo" component="input" type="checkbox" /> Turn foo on?
12          </label>
13          <OnChange name="foo">
14            {(value, previous) => {
15              // do something
16            }}
17          </OnChange>
18        </div>
19        ...
20      </form>
21    )}
22  />
23)

Table of Contents

• Components
  • ExternallyChanged
    • name : String
    • children: (externallyChanged: boolean) => React.Node
  • OnBlur
    • name : String
    • children: () => void
  • OnChange
    • name : String
    • children: (value: any, previous: any) => void
  • OnFocus
    • name : String
    • children: () => void

Components

The following can be imported from @emekalites/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.

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 changed. 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 is changed. It is passed the new value and the previous value.

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.