Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hustcc/timeago-react
:clock8: Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'.
https://github.com/hustcc/timeago-react
date-format javascript react-component react-timeago timeago timeago-react
Last synced: 7 days ago
JSON representation
:clock8: Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'.
- Host: GitHub
- URL: https://github.com/hustcc/timeago-react
- Owner: hustcc
- License: mit
- Created: 2016-08-08T03:23:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T11:15:10.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T03:34:42.171Z (2 months ago)
- Topics: date-format, javascript, react-component, react-timeago, timeago, timeago-react
- Language: TypeScript
- Homepage: https://git.hust.cc/timeago-react
- Size: 1.07 MB
- Stars: 418
- Watchers: 6
- Forks: 22
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend - timeago-react - Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'. ![](https://img.shields.io/github/stars/hustcc/timeago-react.svg?style=social&label=Star) (Repository / Date & Time)
- awesome - hustcc/timeago-react - :clock8: Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'. (TypeScript)
- awesome-react-components - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'. (UI Components / Time / Date / Age)
- awesome-react - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'. ![](https://img.shields.io/github/stars/hustcc/timeago-react.svg?style=social&label=Star) (UI Components / Time / Date / Age)
- awesome-list - timeago-react - Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'. (Demos / Time / Date / Age)
- awesome-react-components - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'. (UI Components / Time / Date / Age)
- awesome-react-components - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'. (UI Components / Time / Date / Age)
- awesome-react-components - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'. (UI Components / Time / Date / Age)
- fucking-awesome-react-components - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'. (UI Components / Time / Date / Age)
README
# 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](https://github.com/hustcc/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](https://img.shields.io/npm/v/timeago-react.svg)](https://www.npmjs.com/package/timeago-react)
[![build](https://github.com/hustcc/timeago-react/workflows/build/badge.svg)](https://github.com/hustcc/timeago-react)
[![demo](https://github.com/hustcc/timeago-react/workflows/demo/badge.svg)](https://github.com/hustcc/timeago-react)
[![npm](https://img.shields.io/npm/dm/timeago-react.svg)](https://www.npmjs.com/package/timeago-react)
[![react supported](https://img.shields.io/badge/React-%5E0.14.0%20%7C%7C%20%5E15.0.0%20%7C%7C%20%5E16.0.0%20%7C%7C%20%5E17.0.0-blue.svg)](https://github.com/hustcc/timeago-react)
[![npm](https://img.shields.io/npm/l/timeago-react.svg)](https://www.npmjs.com/package/timeago-react)## Install
> **npm install timeago-react**
## Usage
```jsx
import * as React from 'react';
import TimeAgo from 'timeago-react'; // var TimeAgo = require('timeago-react');```
## 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.
- **`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
- **`locale`** (optional, string)
The `locale` language of statement, default is `en`. All supported locales [here](https://github.com/hustcc/timeago.js/tree/master/src/lang). If you want to use locale which is not `zh_CN` / `en`, you should import the locale before use it. As below:
```jsx
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.
```
- **`style`** (optional, object)
The `style` object to applied to the root element.
Props not documented above are applied to the root element.
## LICENSE
MIT