Related: Styling Frigade Components

​
Building your own components

If you want to build something entirely custom, you can also build your own components and/or UI and use Frigade to manage content, state management, targeting, etc.

You’ll leverage the useFlows() hook to directly access Flow data and control the state of your users’ progress through the Flow. See Flow Hook for more details and Building a Custom Component for a guided walkthrough.

​
Embedding Custom React Components

Frigade’s library of onboarding components allow developers to add and embed custom React components within them.

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 your 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 myCustomizedStep, you could do the following:

const CustomStep = ({ stepData, appearance, ...otherProps }) => {
  return (
    <div>
      <h1>{stepData.title}</h1>
      <p>{stepData.subtitle}</p>
    </div>
  );
};

<FrigadeChecklist customStepTypes={{ myCustomizedStep: CustomStep }} />

The corresponding config.yml in the admin dashboard would be:

steps:
  - id: my-id
    type: myCustomizedStep
    title: Custom Step
    subtitle: This is a custom Step
Components OverviewAnnouncement