react-graphic-timeline

Description

Create graphic timelines for your react apps Demo

Install

yarn add react-graphic-timeline

npm install react-graphic-timeline

Usage

import React from 'react'

import TimeLine from 'react-graphic-timeline'

export default function MyApp() {
    return (
        <TimeLine data={myData} start="2009-03-10" end="2009-03-21" />
    )
}

Props

data -> array -> Required

Example:

[
  {
    id: 3424,
    title: 'Mexico',
    color: '#0A764F',
    image: 'https://urlOfImagee.png'
    data: {
      '10/03/2009': 15,
      ...
    }
  },
  ...
]

{
  id: number,
  title: 'String',
  color: [hex, rgb, rgba, any valid css background-color propery value],
  image: 'String'
  data: {
      'DD/MM/YYYY': number,
  ...
}

The date object key can be of any format by default DD/MM/YYYY (No suported by momentjs) but more readable.

start -> array -> Required

Exmple: "2009-03-10"

Must be in any format supported by momentjs valid date

end -> array -> Required

Exmple: "2009-03-21"

Must be in any format supported by momentjs valid date

Exmple: "2009-03-10"

Must be in any format supported by momentjs valid date

interval -> number

Default 1000ms

The interval in miliseconds between date update.

format -> string

This momentjs valid format it is going to be used as Counter date format.

addition -> object

Default 
{
  amount: 1,
    unit: 'days'
}

amount -> number

The Counter change by unit Example with amount = 2:

First date: 01/02/2019
Second date: 03/02/2019
Third date: 05/02/2019

Example with amount = 3:

First date: 01/02/2019
Second date: 04/02/2019
Third date: 07/02/2019

unit -> string

valid momentjs add function parameter

Example with unit = years:

First date: 01/02/2019
Second date: 01/02/2020
Third date: 01/02/2021

Example with amount = months:

First date: 01/02/2019
Second date: 01/03/2019
Third date: 01/04/2019

Styles

You can modify styles by overwrite the following classes

Counter: .GraphicTimelineCounter

List: .GraphicTimelineList

Row: .GraphicTimeLineRow

Row Title .GraphicTimeLineRow h1

Row value .GraphicTimeLineRow span

Row image .GraphicTimeLineRow img

Dependencies

moment

momentjs is used for management of dates.

react-flip-move

react-flip-move is used for reorder animation of items.

react-countup

react-countup is used for the number count.

Contributing

If you want to contribute to this project you can create an issue and work in i, feel free to do Code Review in open PR or create your own PR.

You can check at GitHub issues and work on one of them or create a new one.

We need help with:

• New Features
• Customization
• Coding best practices
• Code standardization
• Solving Bugs
• Style Themes
• Any other thing that help react-graphic-timeline

Contributors

• JonatanSCS

License

MIT © JonatanSCS