> ## Documentation Index
> Fetch the complete documentation index at: https://docs.membrane.agency/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                 |
| `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     |
| `useTenants` / `useTenant`                                       | List or get tenants                          |
| `usePackages` / `usePackage`                                     | List or get packages                         |
| `useScreen`                                                      | Access UI screens                            |
| `useConnectorSpec`                                               | Get connector 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.