# timeago-react
> timeago-react is a simple(only 1kb) react component used to format date with `*** time ago` statement. eg: '3 hours ago'.
Latest version **3.0.7** (published 2025-03-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install timeago-react
pnpm add timeago-react
yarn add timeago-react
bun add timeago-react
```
## Health
**Score 55/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 3.0.7 |
| Published | 2025-03-04 |
| First published | 2016-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 434 |
| Author | hustcc |
| Maintainers | atool, alanwei0, domdomegg |
| Keywords | react, component, timeago-react, react-timeago, timeago.js, timeago, react-component |
## Links
- npm: https://www.npmjs.com/package/timeago-react
- Repository: https://github.com/hustcc/timeago-react
- Issues: https://github.com/hustcc/timeago-react/issues
- npm.io page: https://npm.io/package/timeago-react
## Dependencies (1)
- [timeago.js](https://npm.io/package/timeago.js.md) ^4.0.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.0.7 (latest) — 2025-03-04
- 3.0.6 — 2023-03-04
- 3.0.5 — 2022-05-26
- 3.0.4 — 2021-09-22
- 3.0.3 — 2021-07-05
- 3.0.2 — 2021-02-05
- 3.0.1 — 2020-10-08
- 3.0.0 — 2019-11-11
- 2.0.1 — 2018-12-14
- 2.0.0 — 2017-11-06
- 1.2.2 — 2017-06-08
- 1.2.0 — 2017-06-01
- 1.1.0 — 2017-05-04
- 1.0.8 — 2017-02-11
- 1.0.7 — 2016-10-11
- … 6 more at https://npm.io/package/timeago-react/versions
## 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.
[](https://www.npmjs.com/package/timeago-react)
[](https://github.com/hustcc/timeago-react)
[](https://github.com/hustcc/timeago-react)
[](https://www.npmjs.com/package/timeago-react)
[](https://github.com/hustcc/timeago-react)
[](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
---
_Source: https://npm.io/package/timeago-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._