onAction()

This event handler runs when any form action is triggered.

Overview

onAction is a <Feathery.Form> prop and callback function to access and modify form state when actions attached to an element like a button or container are triggered, usually via a click. This handler will run twice, once before the element actions are run and once after the element actions are run.

Default form validation logic, if toggled, will run before either case. If an error is detected, onAction will not run until the field error is fixed and the element is clicked again. This function can be asynchronous.

Usage

You can use onAction to short-circuit actions, render a custom component, set field values, and more. The function takes a single Context object that provides form-related state and handlers.

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

function App() {
  // Initialize Feathery
  init('SDKKey', '[e-mail]');

  // Show the `onboarding` Feathery form
  return <Form
    formName='onboarding'
    // Route to a specific step
    onAction={(context) => {
      context.goToStep("Custom Step");
    }}
  />
}

Context API

Key	Type	Description
Form Context		Consistently available form state and functions
trigger	triggerData	The info of the custom action trigger.
actions	string[]	The actions being run
beforeClickActions	boolean	If onAction is running before the element click actions have been run, or after.

triggerData Definition

Key	Type	Description
id	string	The ID of the element that triggered the custom action
text	string	The text displayed on the element that triggered the custom action.
type	string enum	The type of element that triggered the custom action. Can be button, text, or field.
repeatIndex	integer	If the element that triggered the action 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.