ConnBanner

A banner for offline, reconnecting, or a new version of the app.

SourcePackage @kerf-js/veneer

Preview

tsx

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

Usage

tsx

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

A new version

Set stale when a new build is out, and onReload and onLater handle the two choices.

tsx

import { state } from '@kerf-js/core'import { ConnBanner, Stack, Text } from '@kerf-js/veneer'export function NewVersion() {  const stale = state(true)  return (    <Stack gap="related">      <ConnBanner        stale={stale.value}        name="kerf"        onReload={() => (stale.value = false)}        onLater={() => (stale.value = false)}      />      <Text subtle>        {stale.value ? newBuildDescription : 'Dismissed.'}      </Text>    </Stack>  )}const newBuildDescription =  'A new build went out while this tab was open.'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`online`	`Live<boolean>`	`true`	`online` from `@kerf-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: Kerf'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"]

msg

RelatedSync indicator Rate limited