ConnectionPill

A small status that says whether live updates are getting through.

SourcePackage @kerf-js/veneer

Preview

tsx

import { ConnectionPill } from '@kerf-js/veneer'export function States() {  return (  <>    <ConnectionPill state="live" />    <ConnectionPill state="connecting" />    <ConnectionPill state="reconnecting" />    <ConnectionPill state="offline" />  </>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ConnectionPill } from '@kerf-js/veneer'<>  <ConnectionPill state="live" />  <ConnectionPill state="connecting" />  <ConnectionPill state="reconnecting" />  <ConnectionPill state="offline" /></>

Accessibility

Each change is announced once. Going offline is announced straight away.

API Reference

Prop	Type	Default	Description
`state`	`Status`	—	The status: a string, a state or a getter.
`label`	`string`	`'Connection'`	What it is the connection of.
`queued`	`number`	`0`	How many updates are waiting: "Back online. 4 updates."

RelatedConnection banner Bell