onChange()

Overview#

This is a <Feathery.Form> prop and callback function to run custom logic when a field value is changed. It's called every time the user changes one or multiple field values.

Usage#

You can use onChange to log or update form state when the user modifies it.

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'
// Custom form step load logic
onLoad={(context) => {
if (context.changeKeys.includes('is-it-birthday') && context.fields['is-it-birthday']) {
showBirthdaySurprise();
}
}}
/>
}

Context Properties#

KeyTypeDescription
changeKeysstring arrayThe unique IDs of the fields that were changed.
triggerenum {field, googleMaps}What triggered the onChange handler. Either a form field was modified or a Google Maps autocomplete option was selected.
integrationDataoptional objectThird-party metadata may be passed back through this property. If trigger equals googleMaps, this object is a PlaceResult
fieldsfieldData objectThe data of all fields in the form.
stepNamestringThe unique ID of the step.
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.