ConnectionStatus
A connection hint that follows actual browser online and offline events.
Live — this one is real
Connected
Usage
import { ConnectionStatus } from "mizu-ui";
export function Example() {
return <ConnectionStatus />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect status/Feedback.tsx
Source is included in the npm package under src/status/Feedback.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onlineLabel / offlineLabel | string | — | Customize the browser connectivity hints. |
Accessibility
A live text status with stable server rendering. navigator.onLine is a connectivity hint, not proof your API is reachable.
Motion
No continuous animation or polling.