Component Customization
Building components from scratch
If you want to build your own components from scratch, you can leverage the useFlows()
hook to get access to the flow data
and to control the state of your users’ progress through the flow. See the Flows Hooks for more details.
Customizing Frigade components
Related: Styling Frigade Components
Frigade’s library of onboarding components allow developers to add and embed custom React components as individual steps in a Flow.
For instance, the <FrigadeChecklist />
component supports the customStepTypes
prop, which allows you to specify a mapping of step types to custom React components. This allows you to do things like: show custom code snippets, embed custom widgets (e.g. invite a user), and utilize existing experiences inside of Frigade checklists, forms, etc.
Each custom step will receive stepData
(containing the step data from config.yml
), appearance
, and other useful props for rendering the step.
For example, if you wanted to add a custom step type in a checklist called custom
, you could do the following:
const CustomStep = ({ stepData, appearance, ...otherProps }) => {
return (
<div>
<h1>{stepData.title}</h1>
<p>{stepData.subtitle}</p>
</div>
);
};
<FrigadeChecklist customStepTypes={{ custom: CustomStep }} />
The corresponding config.yml
in the dashboard would then be configured as follows:
data:
- id: my-id
# This will tell frigade to map this step to the custom step type
type: custom
title: Custom step
subtitle: This is a custom step