react-timeago.js

react component and hooks for timeago.js, for more information, please see: Document

Installation

npm i react-timeago.js

Components

• TimeAgo

  Display timeago information inside elementType tag base on dateTime props

  • Props

  props	type	required	default	description
  elementType	string	false	div	html tag name for the wrap component
  className	string	false	undefined	Custom class name
  dateTime	Date / number / string	true	undefined	start date
  options	object	false	undefined	options

  
  
  • Options

  options	type	default	description
  locale	string	en_US	locale
  localeRegister	function	custom local register function
  interval	number	1000	update interval duration in milliseconds

Hooks

• useTimeAgo

  return timeago string base on dateTime props

  • Arguments

  props	type	required	default	description
  dateTime	Date / number / string	true	undefined	start date
  options	object	false	undefined	options

  
  
  • Options

  options	type	default	description
  locale	string	en_US	locale
  localeRegister	function	custom local register function
  interval	number	1000	update interval duration in milliseconds

Way to Ride

• Common jS

// import from package entry point
const timeago = require('react-timeago.js')

  <timeago.TimeAgo {...props} />

// only import specific component
const TimeAgo = require('react-timeago.js/lib/components/TimeAgo')

  <TimeAgo {...props} />

• ESM

// import from package entry point
import TimeAgo, { useTimeAgo } from 'react-timeago.js'
  
  const timeAgo = useTimeAgo(dateTime, options)

  <TimeAgo {...props} />

// only import specific component
import TimeAgo from 'react-timeago.js/es/components/TimeAgo'

  <TimeAgo {...props} />

Development by storybook

npm install
npm start storybook

• configuration files list in .storybook directory
• story files list in .stories directory

Test with Jest

npm run test

• __tests__
  • unit test running by jest
  • use test:update to update jest snapshot

Reference

• timeago.js