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 });