🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-time-line

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-time-line

React component for displaying timeline

0.3.0
latest
Source
npm
Version published
Weekly downloads
299
-2.61%
Maintainers
1
Weekly downloads
 
Created
Source

react-time-line

Build Status

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

Live example here.

alt tag

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

Buy Me A Coffee

Keywords

timeline

FAQs

Package last updated on 01 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts