❀Needle-Pinpointing Machine
    Have ideas to improve npm?Join in the discussion! Β»

    react-final-form-listeners
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-final-form-listeners package

    1.0.3Β β€’Β PublicΒ β€’Β Published

    🏁 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.

    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.

    Keywords

    none

    Install

    npm i react-final-form-listeners

    DownloadsWeekly Downloads

    23,438

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar