onSubmit()

Overview#

onSubmit is a <Feathery.Form> prop and callback function to access and modify form state during successful form step submission. It's called every time the user successfully submits a step of the form. 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.

import { Feathery } from 'feathery-react';
function App() {
// Initialize Feathery to Peter
Feathery.init('adminAPIKey', 'peter@feathery.tech');
// Show the `onboarding` Feathery form
return <Feathery.Form
formKey='onboarding'
// Store form data in backend
onSubmit={(context) => {
writeToBackend(context.submitFields);
if (context.lastStep) console.log("User finished form!");
}}
/>
}

Context Properties#

KeyTypeDescription
submitFieldsfieldData objectThe data of fields that the user just submitted.
repeatIndexinteger0-indexed. Specifies which repetition triggered form submission if the trigger is a repeating element. If non-repeating, repeatIndex = 0
fieldsfieldData objectThe data of all fields in the form.
stepNamestringThe unique ID of the step.
userIdstringThe unique ID of the current user.
lastStepbooleanTrue when the step being submitted is the last step the user needs to complete.
setValuesfunctionPass in an object of the shape {<fieldKey>: <fieldValue>} to customize internal form state.
setOptionsfunctionPass in an object of the shape {<fieldKey>: [<fieldOption>]} to override the options a user can select for specific fields.
setErrorsfunctionPass in an object of the shape {<fieldKey>: <fieldErrorString>} to set errors for specific fields. This prevents the step from submitting.

fieldData Object#

The object keys are unique field ID strings, defined by users in the Feathery dashboard. They map to objects that store additional field-specific information, defined below.

KeyTypeDescription
displayTextoptional stringText to display to your user along with the field
typestring enumField type (e.g. textarea, checkbox, etc.)
valueoptional polymorphicUser-submitted value for this field. null if no submission.

fieldData Example#

{'age': {
displayText: 'How old are you?',
type: 'integer_field',
value: 21
}}

Return Value#

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