Enable formatting of time

Author: arunghosh

README.md

@@ -6,13 +6,13 @@ A react component to display event in a vertical timeline format. This is based
 
 ![alt tag](https://github.com/arunghosh/react-time-line/raw/master/docs/timeline.png)
 
-**Installation**
+## Installation
 ```
 npm install react-time-line
 ```
 
 
-**Usage**
+## Usage
 
 ```javascript
 const events = [
@@ -24,17 +24,19 @@ const events = [
   {ts: "2017-09-16T12:20:46.587Z", text: 'Clicked Checkout'},
 ];
 
-<Timeline items={events} />
+// default format is "hh:mm"
+<Timeline items={events} format="hh:mm a" />
 ```
-The events should be ordered in a way you need.
+The events should be ordered in a way you need. 
 
+**For time formatting options [check momentjs format docs](https://momentjs.com/docs/#/displaying/format/).**
 
-**Style**
+## 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
+## For developers
 
 To make new build
 ```

dist/bundle.js

@@ -1,14 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Timeline from '../src';
+import React from "react";
+import ReactDOM from "react-dom";
+import Timeline from "../src";
 
 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'},
+  { 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" }
 ];
 
-ReactDOM.render(<Timeline items={events} />, document.getElementById('app'));
+ReactDOM.render(
+  <Timeline items={events} format="hh:mm a" />,
+  document.getElementById("app")
+);

dist/bundle.js.map

@@ -1,6 +1,6 @@
 {
   "name": "react-time-line",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React component for displaying timeline",
   "main": "dist/bundle.js",
   "scripts": {

example/index.js

@@ -10,14 +10,14 @@ import TimlineItem from "./TimlineItem";
  * @param {Array} items Array of events in the form of ts and text
  * @returns {Object} return object with key as date and values array in events for that date
  */
-function getFormattedData(items) {
+function getFormattedData(items, format="hh:mm") {
   const activities = {};
   items.forEach(({ ts, text }, index) => {
     const date = moment(ts);
     const dateStr = date.format("DD MMM YYYY");
     const list = activities[dateStr] || [];
     list.push({
-      time: date.format("hh:mm"),
+      time: date.format(format),
       text,
       key: index,
     });
@@ -26,8 +26,8 @@ function getFormattedData(items) {
   return activities;
 }
 
-function Timeline({ items }) {
-  const activities = getFormattedData(items);
+function Timeline({ items, format }) {
+  const activities = getFormattedData(items, format);
   const dates = Object.keys(activities);
   return (
     <div className="time-line-ctnr">
@@ -52,6 +52,7 @@ Timeline.propTypes = {
       text: PropTypes.string.isRequired,
     })
   ).isRequired,
+  format: PropTypes.string,
 };
 
 export default Timeline;