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>;