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/webBasic usage
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
| Prop | Type | Default | Notes |
|---|---|---|---|
participantId | string | local | Which participant to watch. |
showWhenAtMost | NetworkQuality | fair | Lowest quality band that still shows the banner. |
renderMessage | (state) => ReactNode | — | Override the in-banner copy (i18n). |
hideDismiss | boolean | false | Hide the dismiss button. |