Docs

React

Reference

Discover methods and types available in the @flows/react and @flows/react-components packages.

@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.

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:

NameTypeRequiredNotes
organizationIdstringYesYour organization ID. Find this in Settings > General.
environmentstringYesThe environment key. Find this in Settings > Environments.
userIdstringYesUnique ID for identifying the user.
componentsobjectYesCustom components to use in your workflows.
tourComponentsobjectYesCustom tour components to use in tour blocks.
userPropertiesobjectNoObject with custom user properties. Values can be string, number, boolean, or date.
apiUrlstringNoCustom API URL useful when using proxy to send Flows requests through your own domain.

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 here.

sidebar.tsx
import { FlowsSlot } from "@flows/react";
 
const Sidebar = () => {
  return (
    <div>
      <h1>My app</h1>
      <FlowsSlot id="my-slot" placeholder={<BannerPlaceholder />} />
    </div>
  );
};
NameTypeRequiredNotes
idstringYesThe Slot ID used to refer to the slot when creating workflows.
placeholderReactNodeNoThe component to render when no component is inserted in the slot.

@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:

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

On this page