Reference

@flows/react

Flows React SDK is a library that allows you to integrate Flows into React applications.

Install the package from npm:

npm i @flows/react

Components

FlowsProvider

The <FlowsProvider /> component is the main component of the Flows SDK. It initializes the SDK and keeps track of the user's state.

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:

FlowsSlot

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

import { FlowsSlot } from "@flows/react";

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

Functions

useCurrentFloatingBlocks()

The useCurrentFloatingBlocks() hook returns the active floating blocks for the user in the current environment.

import { useCurrentFloatingBlocks } from "@flows/react";

// Get the floating blocks for the current user
const blocks = useCurrentFloatingBlocks();

// Find a specific block by key
const specificBlock = blocks.find((block) => block.props.__flows.key === "your-block-key");

Parameters: None

Returns:

An array of ActiveBlock objects representing the current floating blocks.

useCurrentSlotBlocks()

The useCurrentSlotBlocks() hook returns the active slottable blocks for the user in the current environment.

import { useCurrentSlotBlocks } from "@flows/react";

// Get the slottable blocks for the current user in the specified slot
const blocks = useCurrentSlotBlocks("your-slot-id");

// Find a specific block by key
const specificBlock = blocks.find((block) => block.props.__flows.key === "your-block-key");

Parameters:

Returns:

An array of ActiveBlock objects representing the current slottable blocks for the specified slot.

startWorkflow()

Starts a workflow for the current user in the current environment using a the block key of a manual start block. The workflow will start only if:

• Workflow is published in the current environment
• Workflow has a manual start block with a matching block key
• The current user can access the workflow based on the frequency setting
• The current user matches the start block's user property conditions

import { startWorkflow } from "@flows/react";

startWorkflow("your-manual-start-block-key");

Parameters:

Returns: Promise<void>

resetWorkflowProgress()

The resetWorkflowProgress() function resets the progress of a specific workflow for the current user in the current environment.

import { resetWorkflowProgress } from "@flows/react";

<Button onClick={() => resetWorkflowProgress("workflow-id")}>Reset progress</Button>;

Parameters:

resetAllWorkflowsProgress()

The resetAllWorkflowsProgress() function resets the progress of all workflows for the current user in the current environment.

import { resetAllWorkflowsProgress } from "@flows/react";

<Button onClick={() => resetAllWorkflowsProgress()}>Reset all progress</Button>;

Parameters: None

Types

ActiveBlock

Represents a block visible to the user.

ComponentProps

Represents the props passed to a component. In addition to your custom props, it includes the __flows object with Flows properties.

StateMemory

Represents the state memory property of a block.

triggers type:

BlockState

Represents the block state of the selected block in the workflow.

TourComponentProps

Represents the props passed to a tour component. In addition to your custom props, it includes tour component exit nodes and the __flows object with Flows properties.

LanguageOption

Language type used for setting the user's language in the <FlowsProvider /> to enable localization.

Options:

• disabled (default) - The user will be served content in the default language group of your organization.
• automatic - Automatically detect the user's language and use the matching language group. The language is determined by the Navigator.language property in the browser.
• Manual - A specific language string, e.g. en-US, fr-FR, etc. This will use the matching language group for the specified language. See https://www.localeplanet.com/icu/ for a full list of supported languages.

@flows/react-components

To simplify implementation, you can use the @flows/react-components package, which provides pre-built UI components.

Install the package from npm:

npm i @flows/react-components

Then, import and use the components in your app:

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>
  );
};