react-relative-time

React Component for rendering relative dates as <time> HTML5 elements

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-relative-time
300.0.76 years ago6 years agoMinified + gzip package size for react-relative-time in KB

Readme

React Relative Time
Collaborizm Build Status NPM React Component for rendering relative dates as <time> HTML5 element and preserving machine readable format in datetime attribute. Does not depend on moment.js  

Acknowledgement

This module was inspired by a few awesome open source projects.  

Installation

``` npm install react-relative-time ```  

Usage

```jsx import React from 'react' import RelativeTime from 'react-relative-time' class MyComponent extends React.Component { render() {
let now = new Date()
let wasDate = new Date("Thu Jul 18 2013 15:48:59 GMT+0400")
return (
<div>
<p><RelativeTime value={1492630940000} titleFormat="YYYY/MM/DD HH:mm" /></p>
<p><RelativeTime value="1970-01-01T00:00:00Z" titleformat="iso8601" /></p>
<p><RelativeTime value={new Date(2017, 3, 19, 22, 33, 44, 666)} /></p>
</div>
)
} } ```  

Reference

Attribute value

The input date and time, which will be displayed in relative terms to the present date and time. Supported types:
  • Date object
new Date(2017, 3, 19, 22, 33, 44, 666)
  • number - UNIX timestamp in milliseconds
1492630940000
  • string - ISO-8601 date string
1970-01-01T00:00:00Z

Attribute titleFormat

The specifier for the date and time format to be shown in the title attribute. Default: iso8601. Supported formats:
  • iso8601 - ISO-8601 date string
  • Custom string placeholders.
Replaces with numbered date/time. Text like "Sunday", "Mon", etc. are not supported. Ex: YYYY/MM/DD HH:mm Supported number placeholders: ``` M = month D = date H = hour m = minute s = second ```