ConnectionStatus
The state of a connection your app reports: connected, connecting, degraded or disconnected.
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add connection-statusDependencies
What add connection-status installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
2 examples · 1 componentStates
The four statuses; children adds detail.
Driven by the socket
The status follows the socket's events; a drop retries with backoff.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
statusWhat your app knows about the connection; you own the transitions. | "connected" | "connecting" | "degraded" | "disconnected" | — |
childrenReplaces the default English label: translations or detail like "Reconnecting…" or "Live · 42 ms". | ReactNode | the status label |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| connected | A success dot. |
| connecting | A pulsing warning dot; use children for "Reconnecting…". |
| degraded | A steady warning dot: reachable but slow or partially failing. |
| disconnected | An error dot. |
Accessibility
A role="status" live region that stays mounted: changes are announced politely without moving focus. Every text change is announced, so keep per-second countdowns or live latency out of children.
The text states the connection; the dot's color only reinforces it, and its pulse stops with reduced motion.
Feed it from real signals (WebSocket open/close, a health endpoint, failed requests). navigator.onLine only says the device has a network, not that your service answers.
If losing the connection blocks work, also say what still works and what to do (an Alert or a disabled Save with a reason); the indicator alone is easy to miss.
Server-safe: no client JavaScript of its own.