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

1. 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

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!