Relative time formatting
Intl.RelativeTimeFormat
Baseline widely available
Chrome71
Edge79
Firefox76
Safari14
Features it needs
- Intl.RelativeTimeFormatWidely available
These libraries hardcode the phrasing for every locale they support: "5 minutes ago", "in 2 days", and all the plural and grammar rules behind them. Intl.RelativeTimeFormat is that same locale data, shipped inside the browser and kept current by the platform instead of a dependency you update by hand.
When this applies
Formatting a timestamp as relative text, such as "5 minutes ago" or "in 2 days".
The native approach
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
rtf.format(-5, "minute"); // "5 minutes ago"When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You need the value to keep ticking on its own, updating from "5 seconds ago" to "6 seconds ago" without a re-render you trigger yourself. Intl.RelativeTimeFormat only formats a value you pass it once; the scheduling these libraries add is still real code.
- You need to pick the unit automatically from a raw millisecond difference. Intl.RelativeTimeFormat takes a number and a unit you already chose, such as "day" or "hour", not a duration it breaks down for you.
- You need a locale Intl's relative-time data doesn't cover well on your target browsers, or offline locale data bundled ahead of time.