Timeago

Relative or formatted timestamp. In isDuration mode it updates live via a setInterval. Accepts Date, ISO string, or numeric timestamp.

Features

Live-updating relative timestamps in isDuration mode.

Formatted date and time-only display modes.

Accepts Date, ISO string, or numeric timestamp.

Machine-readable datetime attribute on time element.

Example

Duration: 5 minutes ago

Full date/time: Today, 14:06

Time only: 14:06

Anatomy


import { Timeago } from '@wire-ui/react'
 
const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000)
 
<div>
<span>Duration: </span>
<Timeago datetime={fiveMinutesAgo} isDuration />
</div>
<div>
<span>Full date/time: </span>
<Timeago datetime={fiveMinutesAgo} />
</div>
<div>
<span>Time only: </span>
<Timeago datetime={fiveMinutesAgo} timeOnly />
</div>

Styling

Timeago renders a <time> element. The datetime HTML attribute always holds the original ISO timestamp for machine readability. Style it like any inline text element.


<Timeago
  datetime={new Date()}
  isDuration
  className="text-sm text-black font-medium"
/>

Using data attributes

Timeago does not expose interactive data attributes. The <time> element’s datetime attribute contains the ISO timestamp.


time { font-variant-numeric: tabular-nums; }

Props

Prop	Type	Default	Description
`datetime`	`Date \| string \| number`	required	The timestamp to display
`isDuration`	`boolean`	`false`	Show relative time (“5 minutes ago”); updates live
`timeOnly`	`boolean`	`false`	Show only the time portion (“09:00”)
`className`	`string`	—	Applied to the `<time>` element

Live updates

In isDuration mode, the component sets a setInterval that recalculates the displayed string every minute. The datetime attribute on the <time> element always holds the original ISO timestamp for machine readability.