Components / Metrics
Relative time
"3 minutes ago" in any locale, with the full date on hover.
@fabrials/ui
Updated , published , in Spanish .
Deterministic, in a fixed zone:
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { RelativeTime, formatRelativeTime, formatAbsoluteTime } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
date | Date | string | number | The moment. |
locale | string | Language of the phrase. |
absoluteFormat | Intl.DateTimeFormatOptions | (date, now) => options | Deterministic mode: print an absolute date, no timer. A function picks the options per date (drop the year when it is this year). |
now | number | () => number | The clock. A number is a fixed instant and stops the timer; a function is read at every tick (a server-anchored clock). |
timeZone | string | The zone dates and the title are printed in. Required when a deterministic time (absoluteFormat or a fixed now) is server-rendered; otherwise the server and the browser print different text. |
Behavior
Refreshes while the page is visible; renders a <time> element with the exact date. With absoluteFormat or a fixed now it is deterministic; with a timeZone it hydrates without a mismatch and without suppressing the warning.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.