What it does
RelativeTime renders a semantic <time> element that displays a timestamp as a human-friendly relative string — "3 minutes ago", "in 2 hours", "last week" — using Intl.RelativeTimeFormat. It automatically re-computes on a dynamic interval so the displayed value always stays current.
API
Accepts a datetime prop (Date, number, or ISO 8601 string) and an optional locale. Renders a native <time> with the correct datetime attribute for machine readability.
Common use cases
- Showing comment timestamps on posts and discussions
- Displaying "last seen" indicators for user presence
- Activity feeds and audit logs with human-readable times
Accessibility
The component uses a native <time> element with a proper datetime attribute, ensuring screen readers and SEO crawlers always have access to the absolute machine-readable timestamp.
Next.js integration notes
Works out of the box with both Pages Router and App Router. Use a dynamic import with ssr: true (default) for best SEO, or ssr: false for purely client-side timestamps.
FAQ
How often does the component update?
The component re-renders on a smart schedule — every second for "just now" intervals, then backs off to minute, hour, and day granularity as the timestamp ages.
Does it work with server-side rendering?
Yes. The initial timestamp is rendered on the server and the live update kicks in after hydration on the client.