react-timeago-i18n

📅🌏 A tiny relative time component for react, which uses the browser's native Intl.RelativeTimeFormat API. This means that all languages are supported without bundling translations.

This library is 0.8 kB, which is significantly smaller than react-timeago which is 96 kB.

Install

npm install react-timeago-i18n

Usage

import TimeAgo from "react-timeago-i18n";

<TimeAgo date="2019-07-16" /> // --> "4 years ago"
<TimeAgo date="2019-07-16" locale="de-AT" /> // --> "vor 4 Jahren"

Props

Property	Description	Default Value
date	string or Date	-
locale	the language to use	navigator.language
formatOptions	options for Intl.RelativeTimeFormat	undefined
hideSeconds	By default, values smaller than 1 minute will shown as "1 minute" instead of frequently updating seconds, unless you set this property to false.	true
roundStrategy	By default, values are roundeded (e.g. 11.9 months becomes "2 years"). If this is not desired, the rounding strategy can be changed to floor.	"round"
timeElement	By default, the result is wrapped in <time title="..."> ... </time>, unless you set this property to false	true

Context Provider

Options can be specified as props, or using a context provider.

For example:

import TimeAgo, { TimeAgoProvider } from "react-timeago-i18n";

<TimeAgoProvider locale="zh-Hans" hideSeconds>
  ...
  <TimeAgo date="2019-07-16" />
  ...
</TimeAgoProvider>;