FormatRelativeTime

Relative time formatting

Pass in a Date object to date prop to display a relative time string (e.g., "5 minutes ago", "in 2 days"), including a tooltip on hover with the full date and time.

The component automatically chooses the most appropriate unit (seconds, minutes, hours, days, months, or years) based on the time difference:

<FormatRelativeTime date={myDate} />

The component will automatically re-render to keep the displayed relative time up to date as time passes. For example;

• "5 minutes ago" will update to "6 minutes ago" after one minute
• "1 second ago" will update to "2 seconds ago" after one second

Locale

FormatRelativeTime follows current bifrost locale (default english).

Use <Bifrost locale={nbNO}> in your app to use norwegian formatting.

Hide tooltip

By default, the component shows a tooltip on hover with the full date and time (including month name, time, and timezone) to provide context for the relative time. If you don't want a tooltip, you can hide it with the noTooltip prop:

<FormatRelativeTime date={myDate} noTooltip />

Sandbox