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.
​

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.

<Form>

Event Handlers

Last modified 21d ago