¿Qué es la línea de tiempo horizontal en ReactJS?

Línea de tiempo horizontal es una línea de tiempo o un gráfico de líneas de forma horizontal que describe algún evento en un punto en el tiempo. Supongamos que hay tres eventos que ocurrieron en un momento o fecha determinados.

Luego podemos representarlo en la línea de tiempo horizontal como se muestra a continuación: 

---(1 Jan 2021)----(15 Jan 2021)-----(22 Mar 2021)----

OnClick of 1 Jan we will show the event.    
    
    The event of 1 Jan 2021 : Happy New Year
    
OnClick of 15 Jan we will show the event.

    The event of 15 Jan 2021 : Festival
        
OnClick of 22 Mar we will show the event.

    The event of 22 March 2021 : Board Exam

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

 

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

• Paso 3: después de crear la aplicación ReactJS, instale la línea de tiempo horizontal de reacción con el siguiente comando.

  npm i react-horizontal-timeline

• Paso 4: ahora, instale los tipos de accesorios usando el siguiente comando.

  npm i prop-types

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from "react";
import HorizontalTimeline from "react-horizontal-timeline";
import "./App.css";
  
function App() {
  const [value, setValue] = useState(0);
  const [previous, setPrevious] = useState(0);
  
  // Values should be only date
  const VALUES = ["2021-01-01", "2021-01-15", "2021-03-22"];
  
  // Description array corresponding to values
  const description = [
    "The event of 1 Jan 2021 : Happy New Year",
    "The event of 15 Jan 2021 : Festival",
    "The event of 22 March 2021 : Board Exam",
  ];
  
  return (
    <div className="root-div">
      <div style={{ width: "60%",
                    height: "100px", 
                    margin: "0 auto" }}>
        <HorizontalTimeline
          styles={{ outline: "#DFA867", foreground: "#19295C" }}
          index={value}
          indexClick={(index) => {
            setValue(index);
            setPrevious(value);
          }}
          values={VALUES}
        />
      </div>
      <div className="text-center">{description[value]}</div>
    </div>
  );
}
  
export default App;

.text-center{
   text-align: center;
}
  
.root-div{
  margin-top: 150px;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Referencia: https://www.npmjs.com/package/react-horizontal-timeline