https://github.com/martinandert/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.
https://github.com/martinandert/react-ago-component
ago counterpart date elapsed javascript react react-component time
Last synced: 3 months ago
JSON representation
A component for React that renders the approximate time ago in words from a specific past date using an HTML5 time element.
- Host: GitHub
- URL: https://github.com/martinandert/react-ago-component
- Owner: martinandert
- License: mit
- Created: 2014-02-19T13:48:51.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2017-12-11T07:59:45.000Z (over 8 years ago)
- Last Synced: 2025-02-13T10:37:33.780Z (over 1 year ago)
- Topics: ago, counterpart, date, elapsed, javascript, react, react-component, time
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 25
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Ago Component
A multi-lingual component for [React][1] that renders the approximate time ago in words from a specific past date using an HTML5 time element.
Features:
* configurable to auto-update its display as time passes by
* supports localized output (with the help of [Counterpart][2] and [Damals][3])
## Installation
Install via npm:
```bash
% npm install react-ago-component
```
## Usage
Just require and render:
```js
var Ago = require('react-ago-component');
var then = new Date('Sat Mar 06 1976 04:05:09 GMT+0100 (CET)');
// render component with
Ago({ date: then }); // JSX:
```
This will output something in the likes of
```html
```
The `date` prop can be set to a Date object, a number holding the milliseconds since Unix epoch, or to a string (which will be parsed as a Date).
There is also a `tooltipFormat` prop to configure the verbosity of the HTML title attribute. Valid values are "short", "long", and "default" (somewhere in-between).
If you want your page to auto-update the visible portion of the rendered HTML element as time passes by, just set the `autoUpdate` prop to `true`. You can also provide an update interval (in seconds) by setting the prop's value to a natural number greater than `0`.
## Localization Support
To localize the rendered output for a locale other than "en" (English), load the corresponding translations and set the locale using [Counterpart][2] and [Damals][3]:
```js
counterpart.registerTranslations('de', require('counterpart/locales/de'));
counterpart.registerTranslations('de', require('damals/locales/de'));
counterpart.setLocale('de');
```
When switching locales the Ago component will auto-adjust its output (no page reloading necessary).
## Example
The examples code is located at the `example` directory. You can clone this repository and run `make install example` and point your web browser to
`http://localhost:3000`.
## Contributing
Here's a quick guide:
1. Fork the repo and `make install`.
2. Run the tests. We only take pull requests with passing tests, and it's great to know that you have a clean slate: `make test`.
3. Add a test for your change. Only refactoring and documentation changes require no new tests. If you are adding functionality or are fixing a bug, we need a test!
4. Make the test pass.
5. Push to your fork and submit a pull request.
## Licence
Released under The MIT License.
[1]: http://facebook.github.io/react/
[2]: https://github.com/martinandert/counterpart
[3]: https://github.com/martinandert/damals