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 { 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'
// 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.
elementRepeatIndexintegerSpecifies which repetition triggered the change if the trigger is a repeating field. This value is 0-indexed and equals 0 if trigger doesn't repeat.
valueRepeatIndexintegerSpecifies which value of the field changed if there are multiple values. This value is 0-indexed.
triggerenum {field, googleMaps}What triggered the onChange handler. Either a form field was modified or a Google Maps autocomplete option was selected.
fieldsfieldData objectThe data of all fields in the form. Full reference
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.
integrationDataoptional objectThird-party metadata may be passed back through this property. If trigger equals googleMaps, this object is a PlaceResult