final-form / final-form-submit-listener

🏁 Final Form decorator that provides callback hooks for submitting

🏁 Final Form Submit Listener 🧐

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.