Skip to main content

Documentation Index

Fetch the complete documentation index at: https://engage-docs.frigade.com/llms.txt

Use this file to discover all available pages before exploring further.

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 />