TimeAgo
Relative times like 3 days ago, with the UTC time to the minute on hover.
import { TimeAgo } from '@iffday/web/src/kit';Example
The browser’s Intl.RelativeTimeFormat writes the time in the reader’s language. Under a minute it counts seconds, then minutes, hours, days, weeks, months and years. It renders a <time> element whose hover text is the UTC time to the minute.
import { TimeAgo } from '@iffday/web/src/kit';
const ago = (minutes: number) => new Date(Date.now() - minutes * 60_000).toISOString();
export default function Example() {
return (
<div style={{ display: 'grid', gap: 6, justifyItems: 'start', color: 'var(--text-2)' }}>
<TimeAgo value={ago(0.5)} />
<TimeAgo value={ago(12)} />
<TimeAgo value={ago(60 * 5)} />
<TimeAgo value={ago(60 * 24 * 3)} />
<TimeAgo value={ago(60 * 24 * 40)} />
</div>
);
}Usage
Pass an ISO time string. The server and the browser render at slightly different moments, so the words can differ; the component turns off the hydration warning for this element.
Props
TimeAgo
apps/web/src/kit.tsx:376Relative "time ago" for activity rows; exact date on hover.
| Prop | Type | Default |
|---|---|---|
value* | string |