Skip to content
🕗 Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'.
TypeScript JavaScript
Branch: master
Clone or download

README.md

timeago-react

timeago-react is a simple react component used to format date with *** time ago statement. eg: '3 hours ago'.

The component based on timeago.js which is a simple javascript module.

  • Realtime render. Automatic release the resources.
  • Simple. Only 2kb.
  • Efficient. When the time is 3 hour ago, the interval will an hour (3600 * 1000 ms).
  • Locales supported.

npm build demo npm react supported npm

Install

npm install timeago-react

Usage

import React from 'react';
import TimeAgo from 'timeago-react'; // var TimeAgo = require('timeago-react');

<TimeAgo
  datetime={'2016-08-08 08:08:08'}
  locale='zh_CN'
/>

Component props

  • datetime (required, string / Date / timestamp)

The datetime to be formatted. can be datetime string, Date instance, or timestamp.

  • live (optional, boolean)

Live render, default is true.

  • className (optional, string)

The class of span. you can setting the css style of span by class name.

  • locale (optional, string)

The locale language of statement, default is en. All supported locales here. If you want to use locale which is not zh_CN / en, you should import the locale before use it. As below:

  • opts.relativeDate (optional, string / Date / timestamp)

The datetime to be calculated interval relative to.

  • opts.minInterval (optional, number)

The min interval to update the ** time ago string

import React from 'react';
import TimeAgo from 'timeago-react';
import * as timeago from 'timeago.js';

// import it first.
import vi from 'timeago.js/lib/lang/vi';

// register it.
timeago.register('vi', vi);

// then use it.
<TimeAgo
  datetime={'2016-08-08 08:08:08'}
  locale='vi'
/>
  • style (optional, object)

The style object to applied to the root element.

Props not documented above are applied to the root element.

LICENSE

MIT

You can’t perform that action at this time.