React Time-Ago
made with React

React Time-Ago

这是一个基于React.js的时间差显示组件。

简介及使用教程

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()的自定义函数,用来获取下面formatterepochSeconds的当前值。 这个在服务端渲染想同步服务器和客户端的时间时特别有用。

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分钟更新一次。

作者

Naman Goel

相关项目

这是一个用于使用React构建可访问的富Web应用程序的工具包。
这是一个使用Material-UI的文件上传Dropzone组件。
这是一个开源的javascript文件上传器。
这是一个基于开源Material风格的组件库。
这是一个React组件库。
这是一个可定制和复用的React Native组件库。