react-beautiful-horizontal-timeline

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.

Take a look at our DEMO

• Our Timeline

Repository

• Github

Install

$ npm install react-beautiful-horizontal-timeline

Example

• 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: "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

• 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!