This is a <Feathery.Form> prop and callback function to run custom logic when a form step is loaded. It's called every time the user loads a step. This function can be asynchronous.


You can use onLoad to update internal form state, log events, etc.

import { init, Form } from 'feathery-react';
function App() {
// Initialize Feathery to Peter
init('adminAPIKey', '');
// Show the `onboarding` Feathery form
return <Form
// Custom form step load logic
onLoad={(context) => {
if (context.stepName === 'begin') context.setValues({'beginForm': True});
else if (context.stepName === 'next-step') logEvent("Loaded Step 2");

Context Properties#

fieldsfieldData objectThe data of all fields in the form. Full reference
stepNamestringThe unique ID of the step.
previousStepNameoptional stringThe unique ID of the previous step. null if this is the first step loaded
userIdstringThe unique ID of the current user.
firstStepLoadedbooleanTrue when onLoad is first called for a form.
lastStepbooleanTrue when the step being submitted is the last step the user needs to complete.
setProgressfunctionIf a progress bar exists on the step, its progress will be set to the value passed in (0 - 100). If null is passed, the progress bar will default to its original value.
setStepfunctionIf you want to reroute the user to a different step, pass setStep the ID of the new step to route to. For example, setStep('new-step')
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.
integrationDataobjectThird-party metadata may be passed back through this property. The firebaseAuthId and firebaseAuthToken properties are present when the form is accessed from a Firebase email sign-in link

Return Value#

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