React Time-Ago
made with React

React-timeago是一个基于React.js的时间差显示组件，非常简单的组件，用于显示指定时间与当前的时间差。这个时间差会以指定的格式显示，例如“5分钟之后”、“大约3小时之前”的格式，支持多种语言。

日期会根据需要进行更新。对于间隔不到一分钟的时间，组件会每秒更新；大于5分钟，组件则会每小时更新一次...依此类推。

安装

Npm

npm i react-timeago

Yarn

yarn add react-timeago

使用

简单用法：

<TimeAgo date="Aug 29, 2014" />

// OR in vanilla JS

React.createElement(TimeAgo, {date: 'Aug 29, 2014'})

语言格式支持

import TimeAgo from 'react-timeago'
import frenchStrings from 'react-timeago/lib/language-strings/fr'
import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'

const formatter = buildFormatter(frenchStrings)

// in your react component
<TimeAgo date='Feb 1, 1966' formatter={formatter} />

Props

date (必填)

以前或未来的时间。这个可以是一个Date对象、UTC时间字符串或时间戳。

live (可选)

React-Timeago默认会自动更新其值，如果你不需要，可以设置为false。

now (可选)

一个代替Date.now()的自定义函数，用来获取下面formatter中epochSeconds的当前值。 这个在服务端渲染想同步服务器和客户端的时间时特别有用。

formatter (可选)

一个函数，带有以下参数

• value : 一个整数

• unit : 英文时间单位，是以下的其中一个:

  • 'second'
  • 'minute'
  • 'hour'
  • 'day'
  • 'week'
  • 'month'
  • 'year'
• suffix : 字符串，下列之一：
  • 'ago'
  • 'from now'
• epochSeconds:Date.now()或定义的now属性的计算结果
• nextFormatter: 不带参数的一个函数，返回使用上述参数得出的默认格式值。

这里有些格式化的示例：

• '5 minutes ago' => formatter(5, 'minute', 'ago')
• '1 year from now' => formatter(1, 'year', 'from now')

component (可选) (default: 'time')

用于包裹实时更新结果的ReactClass。

title (可选)

指定component元素的title属性，默认是UTC时间，你可以传入自定义字符串。

minPeriod (可选) (default: 0)

等待组件更新的最小秒数。当你传入一个新的属性时，组件仍会更新。如果你不想在临近时间时每秒钟都更新，你可以设置这个值。

maxPeriod (可选) (default: Infinity)

与minPeriod相反。使用这个会强制时间更新，甚至比默认行为更频繁。 例如，你可以设置这个让时间间隔大于1小时后，仍然每5分钟更新一次。