NetworkIndicator

NetworkIndicator renders a participant's connection quality bucket — one of good, fair, or poor — as either a small set of signal bars or as the 8-px status dot embedded in every VideoTile.

Install

pnpm add @levelchat/react-components

Requirements

• React — react and react-dom ^18 || ^19 (peer dependency).
• LevelChat Web SDK — @levelchat/web ^0.2.4 (peer dependency, wires hook-driven mode to the live Room).
• Provider — wrap the tree in <LevelChatProvider> from @levelchat/web-react so hook-driven mode can subscribe to room events. Prop-driven demos work without it.
• Styles — import the brand tokens + kit stylesheet exactly once at the app entry, before any kit component renders.

In Next.js (App Router), import the stylesheets at the top of your root layout:

// app/layout.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

In Vite (or any plain React app), import them at the top of your entry module:

// src/main.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Basic usage

Hook-driven (subscribes to the live quality score for that participant):

import { NetworkIndicator } from '@levelchat/react-components';

<NetworkIndicator participantId="user_42" />

Or prop-driven for previews:

<NetworkIndicator quality="fair" />

As 8-px dot

Inside VideoTile we render the status as a small dot in the corner instead of the full bars; pass asDot:

<NetworkIndicator participantId="user_42" asDot />

Headless hook

The styled component delegates to useConnectionQuality. Reach for the hook directly if you want to render a custom indicator:

import { useConnectionQuality } from '@levelchat/react-components';

function MyBars({ participantId }) {
  const { quality } = useConnectionQuality({ participantId });
  // quality: 'good' | 'fair' | 'poor' | undefined (unknown)
  return <span>{quality ?? 'unknown'}</span>;
}

Theming

The indicator colours come from three CSS tokens:

• --lc-brand-primary — good bucket.
• --lc-warning-solid — fair bucket.
• --lc-danger-solid — poor bucket.

The 8-px dot variant also paints a 2-px white halo so it stays readable when overlaid on a video tile.

Props