Skip to main content

UI Kit

Pre-built React components for building real-time IoT dashboards. Gauges, charts, stat cards, and indicators — all wired to live device data through hooks.

Install​

npm install @relay-x/ui

Peer dependencies: React 18+ and @relay-x/app-sdk (optional, required for data hooks).

Setup​

Wrap your app with RelayProvider to give all components access to the App SDK instance.

import { RelayProvider } from "@relay-x/ui";
import { RelayApp } from "@relay-x/app-sdk";

const app = new RelayApp({
  api_key: "your_api_key",
  secret: "your_secret",
  mode: "production",
});

function App() {
  return (
    <RelayProvider app={app}>
      <Dashboard />
    </RelayProvider>
  );
}

The provider connects on mount and disconnects on unmount. It also tracks connection status and exposes it via hooks.

info

Components can also be used without RelayProvider by passing data directly via props — the provider is only needed if you're using the data hooks.

What's Included​

Hooks​

  • useRelayConnection — Connection status and SDK instance
  • useRelayTimeSeries — Historical + real-time telemetry data
  • useRelayLatest — Latest value for a metric
  • useRelayPresence — Device online/offline status

Components​

Quick Example​

A dashboard that shows a temperature gauge and a live time series chart:

import { RelayProvider, useRelayTimeSeries, useRelayLatest, NeedleGauge, TimeSeries } from "@relay-x/ui";

function Dashboard() {
  const latest = useRelayLatest({
    deviceIdent: "sensor_01",
    metric: "temperature",
    timeRange: { start: Date.now() - 86400000, end: Date.now() },
  });

  const { data } = useRelayTimeSeries({
    deviceIdent: "sensor_01",
    metrics: ["temperature"],
    mode: "both",
    timeRange: { start: Date.now() - 3600000, end: Date.now() },
  });

  return (
    <div style={{ display: "flex", gap: "2rem" }}>
      <NeedleGauge
        data={latest}
        min={0}
        max={100}
        label="Temperature"
        unit="°C"
        alertZones={[
          { min: 0, max: 30, color: "#3b82f6", label: "Cold" },
          { min: 30, max: 70, color: "#22c55e", label: "Normal" },
          { min: 70, max: 100, color: "#ef4444", label: "Hot" },
        ]}
      />
      <TimeSeries
        data={{ sensor_01: data }}
        metrics={[{ key: "temperature", color: "#f97316" }]}
        title="Temperature (1hr)"
      />
    </div>
  );
}