Alpha

Overview

All available React hooks for Bridge data.

The SDK provides React hooks for accessing Bridge data. All hooks take a bridgeId parameter and return React Query results.

Available Hooks

Hook Patterns

WebSocket vs REST

HookData SourceUpdates
useBridgeStatusREST (polling)Configurable interval
useSystemStatsWebSocketReal-time (1s interval)
useMediaWebSocketOn change
useProcessesWebSocketReal-time (3s interval)
useSystemInfoRESTCached (5 min stale)
usePowerREST/UDPMutations only

Common Return Values

All hooks return React Query results:

const {
  data, // The data (or null/undefined)
  isLoading, // First load in progress
  isError, // Query failed
  error, // Error object
  refetch, // Manual refetch function
} = useSystemStats(bridgeId);

Connection Awareness

Hooks automatically handle connection state:

function Stats({ bridgeId }: { bridgeId: string }) {
  const bridge = useBridge(bridgeId);
  const { data } = useSystemStats(bridgeId);

  // Hook is disabled when bridge is not connected
  if (bridge?.status !== "connected") {
    return <div>Not connected</div>;
  }

  if (!data) {
    return <div>Waiting for data...</div>;
  }

  return <div>CPU: {data.cpu.current_load}%</div>;
}

Optimistic Updates

Mutation hooks support optimistic updates:

const { control } = useMedia(bridgeId);

// Volume change is optimistic - UI updates immediately
control.mutate({ action: "set_volume", value: 50 });

On this page