How to build an accessible RelativeTime in React
Renders a native <time> element with a machine-readable datetime and the absolute date in the title, so the precise instant is available even though the visible text is relative
When to use a RelativeTime
- Showing how long ago something happened in human terms ("3 minutes ago")
- Timestamps in feeds, comments, and activity logs where recency matters more than precision
- Anywhere a self-updating relative time is friendlier than an absolute date
When not to use it
- Precise timestamps in tables or audit logs — use formatDate for an exact, sortable value
- Dates far in the past/future where "2 years ago" is less useful than the actual date
Accessibility
Role time, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <RelativeTime date={date} /> as the only representation of a legal/audit timestamp
Prefer: <time>{formatDate(date)}</time> for exact records; RelativeTime for casual recency
Relative phrases lose precision; the exact date belongs in records (RelativeTime still exposes it via title/datetime)
Example
<RelativeTime date={post.createdAt} />