Hooks

Hooks let you interact with Membrane resources from React components. They handle async operations and state management automatically.

Get the Membrane client instance with useMembrane():

import { useMembrane } from '@membranehq/react'

function MyComponent() {
  const membrane = useMembrane()
  // Use membrane.ui.connect(), membrane.action(), etc.
}

Hooks for individual entities

Hooks for individual entities are used to fetch and manage data for a single workspace element such as Flow or Field Mapping.

They have the following structure:

useFlow(selector: FlowSelector): {
    flow: undefined | Flow;
    apply: ((integrationKeys: string[]) => Promise<Flow[]>);
    reset: (() => Promise<Flow>);
    refresh: (() => Promise<Element>);
    accessor: undefined | FlowAccessor;
    loading: boolean;
    saving: boolean;
    error: any;
    refreshing: boolean;
    create: ((data: CreateFlowRequest) => Promise<undefined | Flow>);
    patch: ((data: Partial<UpdateFlowRequest>) => Promise<void>);
    put: ((data: UpdateFlowRequest) => Promise<void>);
    archive: (() => Promise<void>);
}

Here is what each part of it means:

`selector`	String or object that uniquely identifies the entity. It can be the entity's ID or a combination of entity key and connection selector.
`flow`	Current state of the entity
`apply`	Applies universal entity to selected integrations
`reset`	Resets entity to its initial state (only works for entities that have parents)
`refresh`	Refresh entity data from the server
`accessor`	SDK-provided object for working with the entity.
`loading`	Whether initial data is being loaded
`saving`	Whether entity is being saved to the server
`error`	Error that occurred during last operation
`refreshing`	Whether entity is being refreshed from server
`create`	Create new entity
`patch`	Partially update entity
`put`	Fully update entity (replace all its properties with provided ones)
`archive`	Archive (soft delete) entity

Hooks for lists

Hooks for fetching lists of entities look like this:

useFlows(query?): {
    items: Flow[];
    refresh: (() => Promise<void>);
    refreshing: boolean;
    loadMore: (() => Promise<void>);
    loadingMore: boolean;
    loading: boolean;
    error: any;
}

Here is what each part of it means:

`query`	Query for fetching / filtering the list of entities
`items`	Current list of entities (including all the loaded pages)
`loadMore`	Load the next page of entities from the server (if there is no more pages - nothing will happen)
`loadingMore`	Whether more entities are being loaded from the server
`refresh`	Refresh the list of entities from the server (if multiple pages were fetched previously - only the first page will remain after the refresh)
`loading`	Whether the list is being loaded from the server
`error`	Error that occurred during the last operation

TypeScript Tips

Hooks return fully typed data. Use the exported types for additional type safety:

import { useConnections, useMembrane } from '@membranehq/react'
import type { Connection } from '@membranehq/sdk'

function ConnectionList() {
  const { items, loading, error } = useConnections()
  // items: Connection[] | undefined
  // loading: boolean
  // error: Error | undefined

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {items?.map((conn: Connection) => (
        <li key={conn.id}>
          {conn.name} {conn.disconnected ? '(disconnected)' : ''}
        </li>
      ))}
    </ul>
  )
}

List of hooks

You can find the full list of hooks and their signatures in the React Library Reference