react-beautiful-horizontal-timeline

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

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

Example: in your App.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;