Reverse in React Timeline component

27 Dec 20246 minutes to read

You can display the Timeline items in reverse order, for different alignments by using the reverse property which provides adaptability and improves user interaction.

import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';

function App() {

    const careerProgress = [
        "Graduated \n Bachelors in Computer Engineering",
        "Software Engineering Internship \n ABC Software and Technology",
        "Associate Software Engineer \n ABC Software and Technology",
        "Software Level 1 Engineer \n XYZ Solutions"
    ];

    return (
        <div id='timeline' style={{ height: "350px" }}>
            <TimelineComponent align='before' reverse={true}>
                <ItemsDirective>
                    <ItemDirective content='June 2022' oppositeContent = {careerProgress[0]} />
                    <ItemDirective content='Aug 2022' oppositeContent = {careerProgress[1]} />
                    <ItemDirective content='Feb 2023' oppositeContent = {careerProgress[2]} />
                    <ItemDirective content='Mar 2024' oppositeContent = {careerProgress[3]} />
                </ItemsDirective>
            </TimelineComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';

function App() {
    
    const careerProgress = [
        "Graduated \n Bachelors in Computer Engineering",
        "Software Engineering Internship \n ABC Software and Technology",
        "Associate Software Engineer \n ABC Software and Technology",
        "Software Level 1 Engineer \n XYZ Solutions"
    ];

    return (
        <div id='timeline' style={{ height: "330px" }}>
            <TimelineComponent align='before' reverse={true}>
                <ItemsDirective>
                    <ItemDirective content='June 2022' oppositeContent = {careerProgress[0]} />
                    <ItemDirective content='Aug 2022' oppositeContent = {careerProgress[1]} />
                    <ItemDirective content='Feb 2023' oppositeContent = {careerProgress[2]} />
                    <ItemDirective content='Mar 2024' oppositeContent = {careerProgress[3]} />
                </ItemsDirective>
            </TimelineComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Timeline Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin-top: 30px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>