🏁 Final Form decorator that provides callback hooks for submitting

Usage no npm install needed!

<script type="module">
  import finalFormSubmitListener from '';


🏁 Final Form Submit Listener 🧐

NPM Version NPM Downloads Build Status styled with prettier

Decorator for 🏁 Final Form that will call provided callbacks when submission is attempted, succeeds, or fails.


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


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


🏁 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 */ },
  decorators={[ submitListener ]} // <--------- 😎
  render={({ handleSubmit }) =>
    <form onSubmit={handleSubmit}>

      ... inputs here ...



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.


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.