ConnectionBanner

A full-width notice for when the connection drops, with Retry.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, ConnectionBanner, ConnectionPill, Row, Stack } from '@weft-js/warp'export function Offline() {  const status = state<'live' | 'reconnecting' | 'offline'>('live')  const retry = async () => {    status.value = 'reconnecting'    await pause(1500)    status.value = 'live'  }  return (    <Stack gap="related">      <ConnectionBanner state={status} onRetry={() => void retry()} />      <Row gap="related" justify="between">        <ConnectionPill state={status} />        <Button emphasis="outline" tone="neutral" size="sm" onClick={() => (status.value = status.value === 'offline' ? 'live' : 'offline')}>{status.value === 'offline' ? 'Reconnect' : 'Lose the connection'}</Button>      </Row>    </Stack>  )}const pause = (ms: number) => new Promise(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

import { ConnectionBanner } from '@weft-js/warp'

Accessibility

It stays quiet for assistive technology: the pill does the announcing.

API Reference

Prop	Type	Default	Description
`state`	`Status`	—	The status: a string, a state or a getter.
`delay`	`number`	`3000`	How long to wait while reconnecting, in ms.
`offline`	`unknown`	`"You're offline. Showing what was saved; new notifications will arrive when you reconnect."`	The offline text.
`reconnecting`	`unknown`	`'Reconnecting… changes you make are queued.'`	The reconnecting text.

Event	Type	Default	Description
`onRetry`	`(() => void)`	—	Adds Retry now.

RelatedConnection pill Alert