Skip to content
🏁 Final Form decorator that provides callback hooks for submitting
JavaScript
Branch: master
Clone or download
Latest commit cbd5cb9 Jun 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
src
.babelrc
.eslintignore
.eslintrc
.flowconfig
.gitignore
.prettierrc
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package-scripts.js
package.json
rollup.config.js

README.md

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

You can’t perform that action at this time.