contextRef
ref object that can be used to access the context of a form
contextRef
is a <Feathery.Form> prop that will set the current
property of a ref to an instance containing form state and functions useful for interacting with the form.You can set the current form step, update a field value, get the current step name, and more.
import { useRef } from 'react';
import { init, Form, FormContext } from '@feathery/react';
function App() {
// Initialize Feathery
init('SDKKey', '[email protected]');
const context = useRef<FormContext>(null);
// After the Form is rendered, and the ref is set, you can
// access any of the properties listed below
setTimeout(() => context.current.setStep('New Step'), 1000);
// Show the `onboarding` Feathery form
return <Form
formName='onboarding'
// Fetch the Feathery form context
contextRef={context}
/>
}
These properties are available on the ref and all of the lifecycle callback functions.
Key | Type | Description |
---|---|---|
stepName | string | The name of the step the user is currently on |
userId | string | The ID of the current user. |
setProgress | (number | { progress?: number; segments ?: number }) => {} | Set the amount of the progress bar on the current step. Pass in either a number from 0 - 100 or if you want a segmented progress bar, you can pass in both the progress amount and the number of segments you want the progress bar to be broken into. |
setStep | function | If 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') |
setValues | function | Pass in an object of the shape {<fieldId>: <fieldValue>} to update the user's form field and hidden field values. |
setFormCompletion | function | Pass in a boolean flag to set the user's completion status for this form. |
setOptions | (string[] | { value: string; label ?: string; image ?: string }[]) => {} | Dynamically update the available options for fields that support a list of options (radio groups, checkbox groups, dropdowns, button groups, text fields). Either pass in an array of new values, or for more granular control over stored values and rendered images & labels, you can pass in an array of objects. |
validateStep | (showErrors = true) => { [fieldKey: string]: string } | Runs default form validation on the current step. Triggers built-in field validation along with custom validation rules specified from the dashboard. Errors will be shown unless false is passed for showErrors.
Returns an error message per field, or an empty string if the field is valid. |
Last modified 21d ago