onSubmit()

This event handler runs when a step of the form is submitted.

Overview

onSubmit is a <Feathery.Form> prop and callback function to access and modify form state when a form step is successfully submitted. It's called every time the user is about to successfully submit a step of the form, but before the actual submission happens. This function can be asynchronous.

Usage

You can use onSubmit to store the submitted user data, update your rendered components, set custom errors, and more. It takes a single Context object that provides form-related state and handlers.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    // Store form data in backend
    onSubmit={(context) => {
      writeToBackend(context.submitFields);
      if (context.lastStep) console.log("User finished form!");
    }}
  />
}

Context API

KeyTypeDescription

Consistently available form state and functions

submitFields

The data of fields that the user just submitted. Excludes fields hidden by conditional rules.

trigger

Info of the element that triggered the submission.

triggerData Object

KeyTypeDescription

id

string

The ID of the element that triggered the submission

text

string

The text displayed on the element that triggered the submission.

type

string enum

The type of element that triggered the submission. Can be button, text, or field.

repeatIndex

integer

If the element that triggered the submission repeats, this specifies which repetition it is. This value is 0-indexed and equals 0 if the element doesn't repeat.

Return value

A promise can be optionally returned from this function if it's asynchronous and you want execution to await.

Last updated