React SDK

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

Hook	Description
`useMembrane`	Get the MembraneClient instance from context
`useIntegrations` / `useIntegration`	List or get integrations
`useConnections` / `useConnection`	List or get connections
`useActions` / `useAction`	List or get actions
`useActionInstances` / `useActionInstance`	List or get action instances (per-tenant)
`useFlows` / `useFlow`	List or get flows
`useFlowInstances` / `useFlowInstance`	List or get flow instances
`useFlowRuns` / `useFlowRun`	List or get flow run history
`useDataSources` / `useDataSource`	List or get data sources
`useDataSourceInstances` / `useDataSourceInstance`	List or get data source instances
`useFieldMappings` / `useFieldMapping`	List or get field mappings
`useFieldMappingInstances` / `useFieldMappingInstance`	List or get field mapping instances
`useDataLinkTables` / `useDataLinkTable`	List or get data link tables
`useDataLinkTableInstances` / `useDataLinkTableInstance`	List or get data link table instances
`useAppEventTypes` / `useAppEventType`	List or get app event types
`useAppEventSubscriptions` / `useAppEventSubscription`	List or get app event subscriptions
`useAppDataSchemas` / `useAppDataSchema`	List or get app data schemas
`useAppDataSchemaInstances` / `useAppDataSchemaInstance`	List or get app data schema instances
`useExternalEventSubscriptions` / `useExternalEventSubscription`	List or get external event subscriptions
`useCustomers` / `useCustomer`	List or get customers
`usePackages` / `usePackage`	List or get packages
`useScreen`	Access UI screens
`useConnectorSpec`	Get connector specification
`useDataCollectionSpec`	Get 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.