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:
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.
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 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.
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. |
@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:
Then, import and use the components in your app: