LiveStatus

A small pill saying whether a live connection is working.

SourcePackage @kerf-js/veneerTry it

Preview

tsx

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

Installation

npm install @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview

Controls

State

connectinglivereconnectingoffline

State

Label

Words

Codeupdates as you change the controls

import { LiveStatus } from '@kerf-js/veneer'<LiveStatus state="live" label="Log stream" />

Usage

tsx

import { LiveStatus } from '@kerf-js/veneer'<LiveStatus />

Your own words

Children replace the default word.

tsx

import { state } from '@kerf-js/core'import { LiveStatus } from '@kerf-js/veneer'export function Words() {  return (  <>    <LiveStatus state="live">Synced</LiveStatus>    <LiveStatus state="reconnecting">      Back in a moment    </LiveStatus>    <LiveStatus state="offline">      Saved on this device    </LiveStatus>  </>  )}

Losing the connection

Pass the state you have, and it follows.

tsx

import { state } from '@kerf-js/core'import { Button, LiveStatus } from '@kerf-js/veneer'import type { LiveState } from '@kerf-js/veneer'export function Drop() {  const now = state<LiveState>('live')  const drop = () => {    now.value = 'offline'    setTimeout(() => (now.value = 'reconnecting'), 1200)    setTimeout(() => (now.value = 'live'), 2800)  }  return (    <>      <LiveStatus        state={now.value}        label="Log stream"      />      <Button        size="sm"        emphasis="outline"        tone="neutral"        disabled={now.value !== 'live'}        onClick={drop}      >        Drop the connection      </Button>    </>  )}

A panel header

Use state and label to show whether a stream is live beside a heading.

tsx

import { state } from '@kerf-js/core'import {  Heading,  LiveStatus,  Row,  Stack,  Text} from '@kerf-js/veneer'export function Header() {  return (  <Row    justify="between"    gap="group"  >    <Stack gap="hair">      <Heading level={3}>Logs</Heading>      <Text subtle>storefront, eu-west</Text>    </Stack>    <LiveStatus      state="live"      label="Log stream"    >      Streaming    </LiveStatus>  </Row>  )}

When to use

Use it for

Anything that streams, syncs or updates by itself

Reach for something else

Badge, when it is a fixed status, not a connection
Alert, when the connection has been lost and people must act

Accessibility

It is a live status, so changes are announced. label says what the connection is for.

API Reference

Prop	Type	Default	Description
`state`	`LiveState`	—	The connection: `connecting`, `live`, `reconnecting` or `offline`.
`label`	`string`	—	What is connected, for screen readers: "Log stream: live".
`children`	`unknown`	—	Replaces the default word.

RelatedBadge Alert