🏁 React Final Form Listeners

🏁 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

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.

License

agergo/react-final-form-listeners

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages