Skip to main content
The React SDK provides hooks and pre-built UI components for building integration experiences in your React app. It’s built on top of the TypeScript SDK.

​
Install

npm install @membranehq/react

​
Setup

Wrap your app with the Membrane provider: 
import { MembraneProvider } from '@membranehq/react'

function App() {
  return (
    <MembraneProvider
      fetchToken={async () => {
        const response = await fetch('/api/membrane-token')
        const { token } = await response.json()
        return token
      }}
    >
      <YourApp />
    </MembraneProvider>
  )
}

​
Hooks

Use hooks to fetch and manage Membrane resources: 
import { useIntegrations, useConnections, useAction } from '@membranehq/react'

function IntegrationsPage() {
  const { items: integrations } = useIntegrations()
  const { items: connections } = useConnections()

  return (
    <div>
      {integrations?.map((integration) => (
        <div key={integration.id}>{integration.name}</div>
      ))}
    </div>
  )
}

​
Available Hooks

HookDescription
useMembraneGet the MembraneClient instance from context
useIntegrations / useIntegrationList or get integrations
useConnections / useConnectionList or get connections
useActions / useActionList or get actions
useActionInstances / useActionInstanceList or get action instances (per-tenant)
useFlows / useFlowList or get flows
useFlowInstances / useFlowInstanceList or get flow instances
useFlowRuns / useFlowRunList or get flow run history
useDataSources / useDataSourceList or get data sources
useDataSourceInstances / useDataSourceInstanceList or get data source instances
useFieldMappings / useFieldMappingList or get field mappings
useFieldMappingInstances / useFieldMappingInstanceList or get field mapping instances
useDataLinkTables / useDataLinkTableList or get data link tables
useDataLinkTableInstances / useDataLinkTableInstanceList or get data link table instances
useAppEventTypes / useAppEventTypeList or get app event types
useAppEventSubscriptions / useAppEventSubscriptionList or get app event subscriptions
useAppDataSchemas / useAppDataSchemaList or get app data schemas
useAppDataSchemaInstances / useAppDataSchemaInstanceList or get app data schema instances
useExternalEventSubscriptions / useExternalEventSubscriptionList or get external event subscriptions
useCustomers / useCustomerList or get customers
usePackages / usePackageList or get packages
useScreenAccess UI screens
useConnectorSpecGet connector specification
useDataCollectionSpecGet data collection specification

​
UI Components

Pre-built components for common integration UIs: 
import { Integrations, DataBuilder } from '@membranehq/react'

// Render a full integrations list
<Integrations />

// Render a data builder for configuring field mappings
<DataBuilder />
See the sub-pages for detailed reference on Hooks, UI Components, and more.