React SDK

The official Flows SDK for React.

Flows React SDK

Installation

You can install the Flows React SDK from npm:

npm i @flows/react

pnpm add @flows/react

yarn add @flows/react

bun add @flows/react

Usage

Check out our template projects for implementation examples.

The SDK provides a FlowsProvider component that you can use to wrap your app. Initialize it with your organization ID and environment key, which you can find in the Settings > General and Settings > Environments sections of the Flows dashboard.

layout.tsx

import { FlowsProvider } from "@flows/react";
 
const App = () => {
  return (
    <FlowsProvider
      organizationId="your-organization-id" // Find this in Settings > General
      environment="production" // Default environment
      userId="your-user-id" // Identify the user
      components={{}}
      tourComponents={{}}
    >
      {/* Your app code here */}
    </FlowsProvider>
  );
};

The FlowsProvider accepts the following props:

Name	Type	Required	Notes
`organizationId`	`string`	Yes	Your organization ID. Find this in Settings > General.
`environment`	`string`	Yes	The environment key. Find this in Settings > Environments.
`userId`	`string`	Yes	Unique ID for identifying the user.
`components`	`object`	Yes	Custom components to use in your workflows.
`tourComponents`	`object`	Yes	Custom tour components to use in tour blocks.
`userProperties`	`object`	No	Object with custom user properties. Values can be `string`, `number`, `boolean`, or `date`.
`apiUrl`	`string`	No	Custom API URL useful when using proxy to send Flows requests through your own domain.

FlowsSlot

The FlowsSlot is used to create Slots in your app where you can insert components using Workflows. Learn more about using Slots in the Flows editor here.

import { FlowsSlot } from "@flows/react";
 
const Sidebar = () => {
  return (
    <div>
      <h1>My app</h1>
      <FlowsSlot id="my-slot" placeholder={<BannerPlaceholder />} />
    </div>
  );
};

Name	Type	Required	Notes
`id`	`string`	Yes	The Slot ID used to refer to the slot when creating workflows.
`placeholder`	`ReactNode`	No	The component to render when no component is inserted in the slot.

Custom components

The FlowsProvider component accepts components and tourComponents props that you can use to provide custom components to use in your workflows.

Learn more about adding custom components →

Built-in components

Flows comes with a set of built-in components that you can use in your workflows. You can install the @flows/react-components package from npm:

npm i @flows/react-components

pnpm add @flows/react-components

yarn add @flows/react-components

bun add @flows/react-components

Then, import and use the components in your app:

layout.tsx

import { FlowsProvider } from "@flows/react";
import * as components from "@flows/react-components";
import * as tourComponents from "@flows/react-components/tour";
import "@flows/react-components/index.css";
 
const App = () => {
  return (
    <FlowsProvider
      organizationId="your-organization-id" // Find this in Settings > General
      environment="production" // Default environment
      userId="your-user-id" // Identify the user
      tourComponents={{
        ...tourComponents,
      }}
      components={{
        ...components,
      }}
    >
      {/* Your app code here */}
    </FlowsProvider>
  );
};

Overview Reference