Skip to content
weftGitHub

ConnectionPill

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

SourcePackage @weft-js/warp

Preview

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

Installation

npm install @weft-js/warp

Usage

tsx
import { ConnectionPill } from '@weft-js/warp'<>  <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

PropTypeDefaultDescription
stateStatus—The status: a string, a state or a getter.
labelstring'Connection'What it is the connection of.
queuednumber0How many updates are waiting: "Back online. 4 updates."

RelatedConnection bannerBell