Components
LiveIndicator
Live connection state as a dot and a caption.
Live connection state as a dot and a caption. It usually sits next to the heading of a screen that refreshes itself.
Example
обновлено в 09:05подключаемся…нет связи — обновления приостановлены
import { useEventStream } from "@toimetdev/pathlogs-hooks";
import { LiveIndicator } from "@toimetdev/pathlogs-core";
const { status, updatedAt } = useEventStream(`/api/projects/${id}/stream`, {
events: ["change"],
onEvent: () => router.refresh(),
});
<LiveIndicator
status={status}
updatedAt={updatedAt}
locale="en-US"
labels={{
updated: "updated at {time}",
connecting: "connecting…",
offline: "no connection — updates are paused",
}}
/>Not colour alone
This is why offline is captioned not simply «no connection» but «updates are paused»: what matters to the user is the consequence, not the diagnosis.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status* | "connecting" | "live" | "offline" | — | The connection state. Comes from useEventStream. |
updatedAt | Date | null | — | When a change was last applied. |
locale | string | — | The locale for the time. Defaults to the browser's locale. |
labels | { live?, connecting?, offline?, updated?, tipLive?, tipOffline? } | — | Captions. {time} is substituted inside updated. |
status*"connecting" | "live" | "offline"The connection state. Comes from useEventStream.
updatedAtDate | nullWhen a change was last applied.
localestringThe locale for the time. Defaults to the browser's locale.
labels{ live?, connecting?, offline?, updated?, tipLive?, tipOffline? }Captions. {time} is substituted inside updated.
labels={{ updated: "updated at {time}" }}
// → «updated at 2:32 PM»