arunghosh / react-time-line

A react component to display event in a vertical timeline format

react-time-line

A react component to display event in a vertical timeline format. This is based on the timeline found in AdminLte.

Live example here.

Installation

npm install react-time-line

Usage

const events = [
  {ts: "2017-09-17T12:22:46.587Z", text: 'Logged in'},
  {ts: "2017-09-17T12:21:46.587Z", text: 'Clicked Home Page'},
  {ts: "2017-09-17T12:20:46.587Z", text: 'Edited Profile'},
  {ts: "2017-09-16T12:22:46.587Z", text: 'Registred'},
  {ts: "2017-09-16T12:21:46.587Z", text: 'Clicked Cart'},
  {ts: "2017-09-16T12:20:46.587Z", text: 'Clicked Checkout'},
];

// default format is "hh:mm"
<Timeline items={events} format="hh:mm a" />

The events should be ordered in a way you need.

For time formatting options check momentjs format docs.

Style

Currently there is no proper way to set the style. As a hack you can override the default style. Check for the default style in src/style.scss.

For developers

To make new build

npm run build

To run dev server

npm run dev

To run test

npm run test

react-time-line's Issues

Date sort

Maybe you can sort items before creating your array by day in your getFormattedData(items), like:
items.sort((itemA, itemB) => {
if(moment(itemA.ts).isBefore(itemB.ts)) {
return -1;
} else if(moment(itemB.ts).isBefore(itemA.ts)) {
return 1;
} else {
return 0;
}
}).forEach(....

String New Line or HTML Tag Not Rendering

Would be better with hideTime boolean prop

Thanks for the component.

I think it should have a prop which controls the showing of time or not. I just want the dates and titles.

Custom Props & component.

THis is actually good library, that has been able to group together by date, it would have been great, if we could pass custom Component and props

After yarn add your lib, then i tried to import in my react redux project and it bugs !

• it says to me "ReferenceError: self is not defined"
• on "react": "^16.3.2", "redux": "^4.0.0",

Use military 24H clock or display AM/PM

The component looks great but doesn't differentiate between AM/PM. or show 24 hour clock

This example

<Timeline items={[
          {ts: new Date(), text: 'date obj'},
          {ts: `${new Date()}`, text: 'interpolated'},
          {ts: new Date().toISOString(), text: 'iso'},
          {ts: new Date().toGMTString(), text: 'gmt'},
          {ts: new Date().toDateString(), text: 'date'}
        ]} />

Outputs the times
date obj = 03:15
interpolated = 03:15
iso = 03:15
gmt = 03:15
date = 12:00

• Regardless of morning or afternoon/evening (Tested this at separate times from 8 am to 3pm)

Request to fix is in the Timeline.js, line 13: change date.format('hh:mm'), to date.format('HH:mm'), or date.format('hh:mm a').

Alternatively, allow users option to pass time format specified in module docs or by referring user to Moment.js docs.

Change the date format hh:mm to HH:mm:ss

Hi,

Currently the time show in the range 12-hour. So could you change to 24-hour
Maybe I think just change hh:mm to HH:mm:ss

Thank you for your consideration.

Invalid Date

I am passing date in this format yyyy-mm-ddTHH:MM but it says Invalid date.

Also tried sending as Moment object but still doesn't work.