https://github.com/arunghosh/react-time-line

A react component to display event in a vertical timeline format
https://github.com/arunghosh/react-time-line

component react reactjs timline

Last synced: about 12 hours ago
JSON representation

A react component to display event in a vertical timeline format

• Host: GitHub
• URL: https://github.com/arunghosh/react-time-line
• Owner: arunghosh
• License: mit
• Created: 2017-09-16T11:13:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-11-20T23:19:39.000Z (almost 4 years ago)
• Last Synced: 2024-10-12T21:59:53.121Z (27 days ago)
• Topics: component, react, reactjs, timline
• Language: JavaScript
• Homepage:
• Size: 3.36 MB
• Stars: 73
• Watchers: 5
• Forks: 24
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• project-awesome - arunghosh/react-time-line - A react component to display event in a vertical timeline format (JavaScript)

README

        
# react-time-line

[![Build Status](https://travis-ci.org/arunghosh/react-time-line.svg?branch=master)](https://travis-ci.org/arunghosh/react-time-line)

A react component to display event in a vertical timeline format. This is based on the timeline found in [AdminLte](https://github.com/almasaeed2010/AdminLTE).

Live example [**here**](https://codesandbox.io/s/react-timeline-2y11e).

![alt tag](https://github.com/arunghosh/react-time-line/raw/master/docs/timeline.png)

## Installation

```

npm install react-time-line

```

## Usage

```javascript

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"

```

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

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

```