useFlow - Frigade Engage

The useFlow(<flowId>) hook makes it easy to build headless components or manipulate the state of a Flow for an existing component. It exports a single field, flow, which contains the current state of the Flow, as well as a set of methods to manipulate the Flow. View the Flow class docs to see the available fields and methods.

About this hook

The useFlow hook is especially useful if you want to build a highly custom experience with your UI and/or components. You can find some example of how to build custom Flows in our Custom Components guide.

Example use cases:

Building a custom onboarding progress widget for your sidebar navigation
Building a custom Kanban-style onboarding experience
Building a highly custom onboarding checklist interface

Example usage:

import { useFlow } from "@frigade/react";

function MyComponent() {
  // Replace "myFlowId" with the ID of your Flow
  const { flow } = useFlow("myFlowId");

  return (
    <div>
      <h1>{flow.title}</h1>
      <p>{flow.subtitle}</p>
      <p>Currently on step {flow.getCurrentStep().id}</p>
      <button onClick={flow.next}>Next</button>
      <button onClick={flow.back}>Previous</button>
      <button onClick={flow.reset}>Reset</button>
    </div>
  );
}

Make sure to call any Frigade hook within the context of <Frigade.Provider />