ConnBanner
A banner for offline, reconnecting, or a new version of the app.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Button, ConnBanner, Stack } from '@weft-js/warp'export function Offline() { const online = state(false) const reconnect = async () => { await wait(800) online.value = true } return ( <Stack gap="related"> <ConnBanner online={online.value} retryIn={4} changes={3} onRetry={() => void reconnect()} /> <Button size="sm" emphasis="outline" tone="neutral" onClick={() => (online.value = !online.value)}>{online.value ? 'Go offline' : 'Come back online'}</Button> </Stack> )}const wait = (ms: number) => new Promise(done => { setTimeout(done, ms) })Installation
npm install @weft-js/warpUsage
tsx
import { ConnBanner } from '@weft-js/warp'A new version
Set stale when a new build is out, and onReload and onLater handle the two choices.
tsx
import { state } from '@weft-js/core'import { ConnBanner, Stack, Text } from '@weft-js/warp'export function NewVersion() { const stale = state(true) return ( <Stack gap="related"> <ConnBanner stale={stale.value} name="weft" onReload={() => (stale.value = false)} onLater={() => (stale.value = false)} /> <Text subtle>{stale.value ? 'A new build went out while this tab was open.' : 'Dismissed.'}</Text> </Stack> )}Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
online | Live<boolean> | true | online from @weft-js/core/browser, its derived, or a boolean. |
state | Live<string | undefined> | — | The .live state: live, connecting, reconnecting, offline. |
stale | Live<boolean | undefined> | — | Schema hash mismatch. |
contractFailed | boolean | false | A mutation failed because the contract changed: the Banner turns caution. |
retryIn | number | — | Seconds to the next try: weft's backoff. |
changes | number | 0 | Saved changes waiting to sync. |
name | string | 'the app' | "A new version of {name} is ready". |
| Event | Type | Default | Description |
|---|---|---|---|
onRetry | (() => void) | — | Adds Retry now, to try before the backoff runs out. |
onReload | (() => void) | — | Save drafts, then reload. |
onLater | (() => void) | — | Later hides the stale banner for 30 minutes. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="conn"] [data-part="msg"]
msgrailrail-fill
RelatedSync indicatorRate limited