Overview

New <RelativeTime> variable component for rendering localised relative time strings like "2 hours ago" or "in 3 days". Uses Intl.RelativeTimeFormat under the hood.

Usage

Auto-select unit from a Date

Pass a Date and the component picks the best unit automatically:

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "2 hours ago", "in 3 days", etc.

Explicit value and unit

Specify an exact value and unit, matching the Intl.RelativeTimeFormat API:

import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "in 3 days"

Inside translations

Wrap <RelativeTime> in <T> to include it in translated sentences:

import { T, RelativeTime } from "gt-react";

<T id="commentPosted">
  Posted <RelativeTime>{comment.createdAt}</RelativeTime>
</T>

Hydration safety

<RelativeTime> computes relative time locally, which can cause hydration mismatches in server-rendered apps. Pin baseDate to avoid this:

const now = new Date();

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>

Core utilities

Two new formatting functions are also available in generaltranslation:

• formatRelativeTimeFromDate(date, options) — standalone function
• GT.formatRelativeTimeFromDate(date, options) — class method

Links

• <RelativeTime> API reference
• Using variable components
• PR #1153