Links

contextRef

ref object that can be used to access the context of a form

Overview

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.

Usage

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}
/>
}

Context properties

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.