react-launch-progress v0.2.2

React Launch Timeline

Inspired by SpaceX's clean display for event sequences.

Github Page

Prerequisites

You should be using NodeJS and ReactJS

Installation

React Launch Timeline is available as an npm package.

npm install react-launch-timeline [-S]

or

yarn add react-launch-timeline

Usage

Using React Launch Timeline is very straightforward. Once it is included in your project, you can use the components this way:

import React from 'react';
import Timeline from 'react-launch-timeline';

let dates = [
  {
    name: 'Prep',
    date: '2017-04-23',
    onComplete: () => { console.log("Prep is done!"); }
  },
  {
    name: 'Startup',
    date: '2017-04-24',
    onComplete: () => { console.log("Startup is done!"); }
  },
  {
    name: 'Launch',
    date: '2017-04-25',
    onComplete: () => { console.log("Launch is done!"); }
  },
  ...
];

const MyAwesomeReactComponent = () => (
  <Timeline data={dates} />
);

export default MyAwesomeReactComponent;

Customization