Skip to main content
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:
selectorString or object that uniquely identifies the entity. It can be the entity’s ID or a combination of entity key and connection selector.
flowCurrent state of the entity
applyApplies universal entity to selected integrations
resetResets entity to its initial state (only works for entities that have parents)
refreshRefresh entity data from the server
accessorSDK-provided object for working with the entity.
loadingWhether initial data is being loaded
savingWhether entity is being saved to the server
errorError that occurred during last operation
refreshingWhether entity is being refreshed from server
createCreate new entity
patchPartially update entity
putFully update entity (replace all its properties with provided ones)
archiveArchive (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:
queryQuery for fetching / filtering the list of entities
itemsCurrent list of entities (including all the loaded pages)
loadMoreLoad the next page of entities from the server (if there is no more pages - nothing will happen)
loadingMoreWhether more entities are being loaded from the server
refreshRefresh the list of entities from the server (if multiple pages were fetched previously - only the first page will remain after the refresh)
loadingWhether the list is being loaded from the server
errorError 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