https://github.com/JSainsburyPLC/react-timelines

React Timelines Library
https://github.com/JSainsburyPLC/react-timelines

gantt library luna react sass scss timeline visualization

Last synced: 15 days ago
JSON representation

React Timelines Library

• Host: GitHub
• URL: https://github.com/JSainsburyPLC/react-timelines
• Owner: JSainsburyPLC
• License: mit
• Archived: true
• Created: 2017-04-04T23:50:16.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-09T03:27:53.000Z (almost 4 years ago)
• Last Synced: 2024-06-18T18:37:17.955Z (18 days ago)
• Topics: gantt, library, luna, react, sass, scss, timeline, visualization
• Language: JavaScript
• Homepage: https://jsainsburyplc.github.io/react-timelines/
• Size: 2.65 MB
• Stars: 253
• Watchers: 84
• Forks: 118
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - JSainsburyPLC/react-timelines - React Timelines Library (JavaScript)

README

        
# React Timelines

[**Demo**](https://jsainsburyplc.github.io/react-timelines/)

## Install

```sh

# with npm

npm install react-timelines

# or with Yarn

yarn add react-timelines

```

## Use

```js

import Timeline from 'react-timelines'

const MyWidget = () => 

export default MyWidget

```

## Styling

### Using Webpack

Using Webpack with CSS loader, add the following:

```js

import 'react-timelines/lib/css/style.css'

```

### Using Sass (SCSS)

Using Sass you can configure the timeline with variables:

```scss

$react-timelines-font-family: MaryAnn;

$react-timelines-sidebar-width: 320px;

@import '~/react-timelines/src/scss/style';

```

### Without build tools

Create a CSS file with the contents of `react-timelines/lib/css/style.css` and include it in ``

## Development

```sh

npm install

npm run watch

```

This library is developed using VSCode - opening it in VSCode will recommend extensions, and enable linting and auto-formatting of code.