# React Beautiful Horizontal Timeline

* We offer Horizontal **Timeline** with your costumize.
* Layouts will work on **Any** device, big or small.
* Mobiles support **Swipe**.
* Ability to **Style** timeline as you want.

<p>
  <img src="https://i.ibb.co/chB9TY8/horizontal-Example.jpg" alt="Horizontal-Timeline-Example"  />
</p>


## Take a look at our DEMO

* [Our Timeline](https://mytimeline-ad39c.firebaseapp.com/)

## Repository

* [Github](https://github.com/Maor-Katz/react-beutiful-horizontal-timeline/)

## Install

`
    $ npm install react-beautiful-horizontal-timeline
  `  

## Example

1. Your App.js:

```jsx
import React, { useState } from 'react';
import './App.css';
import { Timeline } from "react-beautiful-horizontal-timeline";

function App() {

  const myList = [
    {
      date: "2018-03-22",
      name: "Event number 01",
      s: "lorem imp ",
      t: "maor k"
    },
    {
      date: "2018-03-22",
      name: "Event number 02",
      s: "lorem imp",
      t: "Maor"
    },
    {
      date: "2018-03-22",
      name: "Event number 03",
      s: "lorem ip ",
      t: "Maor"
    },
    {
      name: "Event number 04",
      date: "2018-03-22",
      s: "lorem impo",
      t: "Maor"
    },
    {
      date: "2018-03-22",
      name: "Event number 05",
      s: "Extreme ",
      t: "Maor tt"
    },
    {
      date: "2018-03-22",
      name: "Event number 06",
      s: "lorem imp ",
      t: "Maor"
    },
    {
      date: "2018-03-22",
      name: "Event number 07",
      s: "lorem ips ",
      t: "Maor"
    },
    {
      date: "2018-03-22",
      name: "Event number 08",
      s: "lorem ips ",
      t: "Maor"
    },
    {
      date: "2018-03-22",
      name: "Event number 09",
      s: "lorem ips ",
      t: "Maor"
    },
    {
      date: "2018-03-22",
      name: "Event number 10",
      s: "lorem imp ",
      t: "Maor"
    },
    {
      name: "Extreme  at Maor Tt10",
      data: "2018-03-22",
      s: "lorem imp ",
      t: "Maor"
    }
  ];

  const [labelWidth, setlabelWidth] = useState(140);
  const [amountMove, setamountMove] = useState(350);
  const [lineColor, setlineColor] = useState("#61dafb");
  const [darkMode, setdarkMode] = useState(false);
  const [eventTextAlignCenter, seteventTextAlignCenter] = useState(true);
  const [showSlider, setshowSlider] = useState(true);
  const [arrowsSize, setarrowsSize] = useState(false);

  return (
    <div className="App">
      <Timeline
        myList={myList}
        labelWidth={labelWidth}
        amountMove={amountMove}
        lineColor={lineColor}
        darkMode={darkMode}
        eventTextAlignCenter={eventTextAlignCenter}
        showSlider={showSlider}
        arrowsSize={arrowsSize}
      />
    </div>
  );
}

export default App
```
2. Your App.css:

`
   @import '../node_modules/react-beautiful-horizontal-timeline/card.css';
  `  

## Props


| Prop                    | Type     | Mandatory  | Description                                         |
| :---------------------: | :------: | :--------: | :-------------------------------------------------: |
| myList                  | Array    | true       |      -                                              |
| labelWidth              | Number   | true       |      -                                              |
| amountMove              | Number   | true       |      -                                              |
| lineColor               | String   | true       |      -                                              |
| darkMode                | Boolean  | true       |      -                                              |
| showSlider              | Boolean  | true       | specific event to show with slider                  |
| eventTextAlignCenter    | Boolean  | false      | text location event                                 |
| arrowsSize              | String   | false      | size of the 2 arrows : 'sm'/'med'/'lg', default - sm|



## Have Fun!