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