NetworkBanner

NetworkBanner surfaces when the local participant's network drops into the lower quality bands, before the user gets frustrated with frame drops. Same scoring source as NetworkIndicator so the per-tile dot and this banner can never disagree.

Install

pnpm add @levelchat/react-components @levelchat/web

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

The two warning tiers, plus the live component — which renders nothing while the connection is healthy (its correct idle behaviour):

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

<NetworkBanner />

Thresholds + re-arm

• poor → solid rose banner: "Your connection is unstable".
• fair → amber banner: "Your connection is degraded".
• good / excellent / unknown → no banner.

Once dismissed, the banner stays hidden until quality crosses back above the threshold AND drops below it again. Jitter alone never re-pops the banner.

Accessibility

• role="status" + aria-live="polite" announces the banner on appearance.
• aria-hidden="true" once dismissed so it stays out of the focus ring.

Props