Installation
How to set up Flows in your React application.
The Flows React SDK is a library that allows you to integrate Flows into React applications. It includes a components package to simplify getting started with Flows in your application.
Check out our template projects for examples of how to implement Flows in your application.
Install the React SDK and components package
You can install the Flows React SDK from npm:
npm i @flows/react @flows/react-componentsAdd the FlowsProvider
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.
import { FlowsProvider } from "@flows/react";
// Import the Basics V2 components and styles
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
// Add the Basics V2 components
tourComponents={{
...tourComponents,
}}
components={{
...components,
}}
>
{/* Your app code here */}
</FlowsProvider>
);
};For a full list of supported properties, see the FlowsProvider documentation.
Create your first workflow
That's it! You're now ready to create your first workflow. See our quickstart guide for more information.
Last updated on