Media & time
Relative time
"3 minutes ago", via `Intl.RelativeTimeFormat` — no date library.
Import
import { RelativeTime } from '@the_viveksingh/vivek-ui'"2 minutes ago"
The absolute timestamp stays in the datetime and title attributes, so the exact moment is never lost - only the label is relative.
The absolute timestamp stays in the title attribute and in the datetime attribute, so the exact moment is never lost.
<RelativeTime date={comment.createdAt} />Words or numbers
numeric="auto" prefers "yesterday"; numeric="always" keeps "1 day ago". Both come from Intl.RelativeTimeFormat, so both are localised.
numeric="auto" prefers words
numeric="always" keeps the count
<RelativeTime date={date} numeric="auto" />
<RelativeTime date={date} numeric="always" />Props
Generated from the package's own type declarations, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
date required | Date | string | number | — | The moment being described. |
locale | string | string[] | — | — |
numeric | 'always' | 'auto' | — | `'auto'` (default) allows "yesterday"; `'always'` forces "1 day ago". |
updateInterval | number | — | Milliseconds between recomputes. Omit for an adaptive rate (1s under a minute, 1min under an hour, 1h beyond). `0` computes once and never updates. |
now | Date | string | number | — | The clock for the FIRST render, on both sides of hydration. Omit it and the first render shows the ABSOLUTE time instead — which depends only on `date`, so the server and the browser agree — and the relative phrasing takes over on mount. That is the graceful degradation too: with JavaScript disabled the reader still gets a real timestamp rather than an empty element. |
timeZone | string | — | Zone for the absolute rendering. Defaults to the runtime's zone. |
titleFormat | Intl.DateTimeFormatOptions | — | `Intl.DateTimeFormat` options for the absolute value. Defaults to medium date, short time. |
Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.
Rendering
RelativeTime declares 'use client' because it needs state, effects or event handlers. Importing it into a Server Component creates a client boundary at this component — everything above it stays on the server.