Guide: Building a Custom Component

In this guide, we cover how to build two custom component examples from scratch using the useFlows() hook.

Custom Checklist
Custom Changelog

Custom Onboarding Checklist

This first example shows how to build a simple unstyled onboarding checklist component that tracks users’ progress and status through the the checklist.

Create a custom Flow

First, let’s create a new Custom Flow in Frigade by opening the Flows page and clicking on the Create Flow button.

Define your config.yml

Next, open the Editor tab and paste in the following config.yml. As this is a headless component, you can use any YAML schema that works for you. It will later be converted into JSON and be available in your code.

config.yml

title: Onboarding Checklist
subtitle: A simple onboarding checklist
steps:
  - id: connect-account
    title: Connect your account
    subtitle: Integrate your favorite tools
  - id: invite-team
    title: Invite your team
    subtitle: Life is better with friends
  - id: create-project
    title: Create your first project
    subtitle: Projects allow you to easily organize your work

If you want your flow to include separate subtasks, you need to add the steps array to your config.yml. This will allow Frigade to track users’ state across steps and show you the conversion rate between steps. However, if you simply want to render content, this is not necessary.

Copy the flowId from Frigade. You will need it later.

Connect Flow to your component

Now, let’s create a React component that works with our custom Flow:

CustomChecklist.tsx

import React from 'react';
import { useFlows } from '@frigade/react';


interface CustomChecklistSchema {
  title: string;
  subtitle: string;
  steps: {
    id: string;
    title: string;
    subtitle: string;
  }[];
}

// TODO: Replace this with your Flow ID
const flowId = 'flow_gg4BPU1aRPbvzhiz';

export function CustomChecklist() {
  const {
    getFlowData,
    isLoading,
    markStepCompleted,
    getStepStatus,
    getFlowStatus,
  } = useFlows();

  if (isLoading) {
    return null;
  }

  const flow = getFlowData<CustomChecklistSchema>(flowId);
  const steps = flow.steps;

  return (
    <div>
      <h1>{flow.title}</h1>
      <h2>{flow.subtitle}</h2>
      <p>Flow status: {getFlowStatus(flowId)}</p>
      <ul>
        {steps.map((step) => {
          const isStepCompleted =
            getStepStatus(flowId, step.id) === 'COMPLETED_STEP';

          return (
            <li key={step.id}>
              <h3>{step.title}</h3>
              <p>{step.subtitle}</p>
              <button
                onClick={() => {
                  markStepCompleted(flowId, step.id);
                }}
                disabled={isStepCompleted}
              >
                {isStepCompleted ? 'Done' : 'Mark done'}
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

And that’s it! Make sure to replace the flowId with your own Flow ID and to use the component inside the scope of the <FrigadeProvider />.

Once you start interacting with the component, you will see data starting to show up in the Users tab and data in the Stats tab.

Component Guides

Additional Guides

Guide: Building a Custom Component

Custom Checklist

Custom Changelog

Custom Onboarding Checklist