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

useBridgeStatus
Check bridge online status without WebSocket.
useSystemStats
Real-time CPU, memory, GPU, disk, and network stats.
useSystemInfo
Static system information (specs, hostname).
useMedia
Now playing info and playback controls.
useProcesses
Running processes with kill/launch controls.
usePower
Shutdown, restart, sleep, hibernate, Wake-on-LAN.

Hook Patterns

WebSocket vs REST

Hook Data Source Updates
useBridgeStatus REST (polling) Configurable interval
useSystemStats WebSocket Real-time (1s interval)
useMedia WebSocket On change
useProcesses WebSocket Real-time (3s interval)
useSystemInfo REST Cached (5 min stale)
usePower REST/UDP Mutations 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 });

Custom Storage
Replace the default localStorage with IndexedDB, SQLite, a REST API, or any custom backend.