onSkip()

Overview#

onSkip is a <Feathery.Form> prop and callback function to access and modify form state when a step of the form is skipped. This function can be asynchronous.

Usage#

You can use onSkip to apply custom form navigation, set form state, or access form state.

import { init, Form } from 'feathery-react';
function App() {
// Initialize Feathery to Peter
init('adminAPIKey', 'peter@feathery.io');
// Show the `onboarding` Feathery form
return <Form
formKey='onboarding'
// Route to a specific step
onSkip={(context) => {
context.setStep("Custom Step");
}}
/>
}

Context Properties#

KeyTypeDescription
stepNamestringThe unique ID of the step.
userIdstringThe unique ID of the current user.
triggerTypestring enumThe type of the submission trigger. Can be button, text, or field.
triggerKeystringIf type is field, the ID of the field. If button, the text on the button. If text, the text itself.
triggerActionstring enumclick if trigger was clicked, change if trigger field value was changed.
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

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, Promise<File> if file submission, array of values if repeated.

fieldData Example#

{
age: {
displayText: 'How old are you?',
type: 'integer_field',
value: 21
},
photo_id: {
displayText: 'Upload a photo of your ID',
type: 'rich_file_upload',
value: Promise<File>
}
}

Return Value#

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