react-beautiful-horizontal-timeline

Please check our DEMO: https://mytimeline-ad39c.firebaseapp.com/

Example: in your App.js:

React Beautiful Horizontal Timeline

We offer Horizontal Timeline with your costumize.

• We offer Horizontal Timeline with your costumize.
• Layouts will work on any device, big or small.
• Mobiles support swipe.

Take A Look At Our DEMO

• Our Timeline

Install

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

## Example

1. Your App.js:

js 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: "Extreme ", t: "maor k" }, { date: "2018-03-22", name: "Event number 02", s: "Extreme ", t: "s k" }, { date: "2018-03-22", name: "Event number 03", s: "Extreme ", t: "Demo" }, { name: "Event number 04", date: "2018-03-22", s: "example some", t: "Maor tt" }, { date: "2018-03-22", name: "Event number 05", s: "Extreme ", t: "Maor tt" }, { date: "2018-03-22", name: "Event number 06", s: "Extreme ", t: "Demo" }, { date: "2018-03-22", name: "Event number 07", statusE: "In Progress", s: "Extreme ", t: "Maor tt" }, { date: "2018-03-22", name: "Event number 08", s: "Extreme ", t: "Maor Tnt" }, { date: "2018-03-22", name: "Event number 09", s: "Extreme ", t: "Demo" }, { date: "2018-03-22", name: "Event number 10", s: "Extreme ", t: "Maor tt" }, { name: "Extreme at Maor Tt10", data: "2018-03-22", s: "Extreme ", t: "Maor Tnt" } ];

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 (

); }

export default App;

2. in your App.css:

## Have Fun!