ConnectionBanner

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  Button,  ConnectionBanner,  ConnectionPill,  Row,  Stack} from '@kerf-js/veneer'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 @kerf-js/veneer

Usage

tsx

import { ConnectionBanner } from '@kerf-js/veneer'

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