final-form-submit-listener

    1.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    ūüŹĀ Final Form Submit Listener ūüßź

    NPM Version NPM Downloads Build Status codecov.io styled with prettier

    Decorator for ūüŹĀ Final Form that will call provided callbacks when submission is attempted, succeeds, or fails.

    Installation

    npm install --save final-form final-form-submit-listener

    or

    yarn add final-form final-form-submit-listener

    Usage

    ūüŹĀ Final Form Usage

    import { createForm } from 'final-form'
    import createDecorator from 'final-form-submit-listener'
     
    // Create Form
    const form = createForm({ onSubmit })
     
    // Create Decorator
    const decorator = createDecorator()
     
    // Decorate form
    const undecorate = decorator(form)
     
    // Use form as normal

    ūüŹĀ React Final Form Usage

    import React from 'react'
    import { Form, Field } from 'react-final-form'
    import createDecorator from 'final-form-submit-listener'
     
    const submitListener = createDecorator({
      beforeSubmit: formApi => { /* do something before */ },
      afterSubmitSucceeded: formApi => { /* do something on success */ },
      afterSubmitFailed: formApi => { /* do something on fail */ },
    })
    ...
    <Form
      onSubmit={submit}
    ¬†¬†decorators={[¬†submitListener¬†]}¬†//¬†<---------¬†ūüėé
      validate={validate}
      render={({ handleSubmit }) =>
        <form onSubmit={handleSubmit}>
     
          ... inputs here ...
     
        </form>
      }
    />

    API

    createDecorator: ({ beforeSubmit?: BeforeSubmit, afterSubmitSucceeded?: AfterSubmit, afterSubmitFailed?: AfterSubmit) => Decorator

    A function that takes optional callback functions and provides a ūüŹĀ Final Form Decorator that will listen for submission events and call the callbacks.

    Types

    AfterSubmit: (form: FormApi) => void

    A callback that is given the ūüŹĀFinal Form instance (FormApi).

    BeforeSubmit: (form: FormApi) => void | false

    A callback that is given the ūüŹĀFinal Form instance (FormApi). If it returns false, the submission will be aborted, and none of the "after submit" callbacks will fire.

    Keywords

    none

    Install

    npm i final-form-submit-listener

    DownloadsWeekly Downloads

    3,063

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    13.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • erikras