All Projects → hustcc → Timeago React

hustcc / Timeago React

Licence: mit
🕗 Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Timeago React

react-super-treeview
👏 Finally, a React Treeview component which is customizable on every level
Stars: ✭ 98 (-62.88%)
Mutual labels:  react-component
dsccodecollab.github.io
Official website of the coding culture
Stars: ✭ 12 (-95.45%)
Mutual labels:  react-component
react-pits
React 中的坑
Stars: ✭ 29 (-89.02%)
Mutual labels:  react-component
reactjs-portfolio
Welcome to my portfolio react.js repository page.
Stars: ✭ 109 (-58.71%)
Mutual labels:  react-component
react-hotkey-tooltip
A global Hotkey provider with built in tooltip for React
Stars: ✭ 34 (-87.12%)
Mutual labels:  react-component
react-pinch-and-zoom
A react container component with pinch-to-zoom gesture interaction.
Stars: ✭ 33 (-87.5%)
Mutual labels:  react-component
light-ui
A lightly React UI library
Stars: ✭ 38 (-85.61%)
Mutual labels:  react-component
React Batch
Batch component for performant frequent updates (flush on count or interval)
Stars: ✭ 258 (-2.27%)
Mutual labels:  react-component
react-translator-component
React language translation module for developing a multilingual project.
Stars: ✭ 13 (-95.08%)
Mutual labels:  react-component
date-range-picker
⚛️📆 Flexible React date range picker calendar with no dependencies.
Stars: ✭ 94 (-64.39%)
Mutual labels:  react-component
rc-charts
一个基于BizCharts的图表库
Stars: ✭ 22 (-91.67%)
Mutual labels:  react-component
react-tabllist
React-based customizable style table or list components that support event and callback functions.
Stars: ✭ 20 (-92.42%)
Mutual labels:  react-component
react-recycled-scrolling
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
Stars: ✭ 26 (-90.15%)
Mutual labels:  react-component
react-star-ratings
A customizable svg star rating component for selecting x stars or visualizing x stars
Stars: ✭ 128 (-51.52%)
Mutual labels:  react-component
react-ago-component
A component for React that renders the approximate time ago in words from a specific past date using an HTML5 time element.
Stars: ✭ 25 (-90.53%)
Mutual labels:  react-component
auto-ui
凹凸 UI 组件
Stars: ✭ 13 (-95.08%)
Mutual labels:  react-component
react-contentful
📰 A React component library that makes it super simple to compose Contentful content into your sites and applications.
Stars: ✭ 58 (-78.03%)
Mutual labels:  react-component
Flawwwless Ui
Flawwwless ui library for React.js.
Stars: ✭ 265 (+0.38%)
Mutual labels:  react-component
React Telephone Input
React component for entering and validating international telephone numbers
Stars: ✭ 254 (-3.79%)
Mutual labels:  react-component
react-crossword
A flexible, responsive, and easy-to-use crossword component for React apps.
Stars: ✭ 80 (-69.7%)
Mutual labels:  react-component

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 * as 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 in seconds)

The min interval in seconds to update the ** time ago string

import * as 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].