SyncIndicator
A quiet word beside the title: Saved, Saving or Offline.
SourcePackage @kerf-js/veneer
Preview
tsx
import { onCleanup, state } from '@kerf-js/core'import { Row, Stack, SyncIndicator, Text, Textarea} from '@kerf-js/veneer'import type { SyncState } from '@kerf-js/veneer'export function Title() { const sync = state<SyncState>('saved') const notes = 'Roll back first, then read the logs.' let timer: ReturnType<typeof setTimeout> | undefined const edit = () => { sync.value = 'saving' clearTimeout(timer) timer = setTimeout(() => (sync.value = 'saved'), 900) } onCleanup(() => clearTimeout(timer)) return ( <Stack gap="related"> <Row justify="between"> <Text role="label">Rollback runbook</Text> <SyncIndicator state={sync.value} /> </Row> <Textarea label="Notes" defaultValue={notes} onInput={edit} /> </Stack> )}Installation
npm install @kerf-js/veneerUsage
tsx
import { SyncIndicator } from '@kerf-js/veneer'States
Use state to show saved, saving or offline.
tsx
import { SyncIndicator } from '@kerf-js/veneer'import type { SyncState } from '@kerf-js/veneer'export function States() { return ( <> {SYNC_STATES.map((s) => ( <SyncIndicator key={s} state={s} /> ))} </> )}const SYNC_STATES: SyncState[] = [ 'saved', 'saving', 'offline',]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 |
|---|---|---|---|
state | SyncState | — | saved, saving or offline. |
RelatedConflict alertConn banner