Syncfusion AI Assistant

How can I help you?

Events in React Timeline component

5 Mar 202610 minutes to read

This section describes the events exposed by the Timeline component and when they are triggered. The following events are available in the Timeline component.

created

The Timeline component triggers the created event when the component rendering process is completed and the Timeline is ready for interaction.

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

function App() {
    return (
        <div id='timeline' style=>
            <TimelineComponent created={() => { /* Your required action here */ }}>
                <ItemsDirective>
                    <ItemDirective content='Planning' />
                    <ItemDirective content='Developing' />
                    <ItemDirective content='Testing' />
                    <ItemDirective content='Launch' />
                </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() {
    return (
        <div id='timeline' style=>
            <TimelineComponent created={() => { /* Your required action here */ }}>
                <ItemsDirective>
                    <ItemDirective content='Planning' />
                    <ItemDirective content='Developing' />
                    <ItemDirective content='Testing' />
                    <ItemDirective content='Launch' />
                </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/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-layouts/styles/tailwind3.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>
</head>

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

</html>

beforeItemRender

The Timeline component triggers the beforeItemRender event before rendering each timeline item, allowing customization of individual items during the rendering process.

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

function App() {
    return (
        <div id='timeline' style=>
            <TimelineComponent beforeItemRender={(args) => { /* Your required action here */ }}>
                <ItemsDirective>
                    <ItemDirective content='Planning' />
                    <ItemDirective content='Developing' />
                    <ItemDirective content='Testing' />
                    <ItemDirective content='Launch' />
                </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, TimelineRenderingEventArgs } from '@syncfusion/ej2-react-layouts';

function App() {
    return (
        <div id='timeline' style=>
            <TimelineComponent beforeItemRender={(args: TimelineRenderingEventArgs) => { /* Your required action here */ }}>
                <ItemsDirective>
                    <ItemDirective content='Planning' />
                    <ItemDirective content='Developing' />
                    <ItemDirective content='Testing' />
                    <ItemDirective content='Launch' />
                </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/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-layouts/styles/tailwind3.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>
</head>

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

</html>