> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmembrane.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/docs/ways-to-use-membrane/sdk).

## Install

```bash theme={null}
npm install @membranehq/react
```

## Setup

Wrap your app with the Membrane provider:

```jsx theme={null}
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:

```jsx theme={null}
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 internal event types |
| `useAppEventSubscriptions` / `useAppEventSubscription` | List or get internal 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:

```jsx theme={null}
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](/docs/ways-to-use-membrane/sdk/react/hooks), [UI Components](/docs/ways-to-use-membrane/sdk/react/ui-components), and more.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.