Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA banner that appears when the browser goes offline, tells people what still works, announces the change once, and says "Back online" briefly when the connection returns. Use this when your phone app can show cached data offline and people need to know the connection state.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when your phone app can show cached data offline and people need to know the connection state.
Do not use it for apps that cannot work offline at all (show an error page) or for flaky-signal warnings from slow requests.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | "You are offline. Saved items still work." | Offline text. |
onRetry | () => void | - | Adds a Try again button. |
status region that is always in the DOM, so the change is announced when its text changes; it is not an alert, because being offline is not an emergency.navigator.onLine and the online and offline events, and renders the same on the server.The pattern ships with a Testing Library test (offline-status-banner.test.tsx) that drives it through roles and the keyboard.