LiveStatus

A small pill saying whether a live connection is working.

SourcePackage @weft-js/warpPlayground

Preview

tsx

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

Installation

npm install @weft-js/warp

Usage

tsx

import { LiveStatus } from '@weft-js/warp'<LiveStatus />

Your own words

Children replace the default word.

tsx

import { state } from '@weft-js/core'import { LiveStatus } from '@weft-js/warp'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 '@weft-js/core'import { Button, LiveStatus } from '@weft-js/warp'import type { LiveState } from '@weft-js/warp'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 '@weft-js/core'import { Heading, LiveStatus, Row, Stack, Text } from '@weft-js/warp'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

Playground

State

connectinglivereconnectingoffline

Label

Words

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

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