Introducing the New React Timeline Component
Tags: react, javascript, web, whatsnew
Published: 2024-04-17 03:06:41

---
title: Introducing the New React Timeline Component
published: true
date: 2024-04-04 15:01:44 UTC
tags: react, javascript, web, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/react-timeline-component
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aexjbmxyx81dz947mokn.png
---
**TLDR:** Exploring the robust features of the new Syncfusion React Timeline, highlighting its orientation, items alignment, and customization of displaying items using templates.  You can also find the steps to integrate it into your React app.

We’re delighted to introduce the new Syncfusion [React Timeline](https://www.syncfusion.com/react-components/react-timeline "React Timeline Component") component in the [Essential Studio 2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release.

The [React Timeline](https://ej2.syncfusion.com/react/documentation/timeline/getting-started "Getting Started with React Timeline") component offers a visually compelling and user-friendly way to display a series of data in chronological order. It is ideal for showcasing user activities, tracking progress, narrating historical timelines, and more.

Like a roadmap infographic, a timeline displays a sequence of data that makes it easier to understand the order of events and get a clear picture of what happened and when enabling users to grasp the flow of time-related information in a web application.

In this blog, we’ll explore the key features of the React Timeline component and the steps to get started!

## Use Case

The React Timeline component is perfect for a variety of scenarios, including:

1. **Historical Events:** Showcase historical moments or company milestones with a clear, chronological display of events over different years.
2. **Project Progress Tracking:** Effortlessly track project milestones, deadlines, and achievements, providing teams with a visual representation of progress throughout the project lifecycle.
3. **E-commerce Journey:** Guide users seamlessly through the stages of an e-commerce experience, from adding items to the cart, selecting delivery options, and completing payment to finalizing the order confirmation.

## Key Features 

The key features of the Timeline component are as follows: 

- [Orientations](#Orientations)
- [Display Additional Information](#Display)
- [Items alignment](#Flexible)
- [Reverse Timeline](#Show)
- [Customization of displaying items using templates](#Customization)

## <a name="Orientations">Orientations</a>

The React Timeline component has two orientation modes:

- **Horizontal:** Displays items side-by-side.
- **Vertical:** Default orientation that displays items one below the other.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Explore-Horizontal-Vertical-Layouts-in-React-Timeline.gif" alt="Explore Horizontal & Vertical Layouts in React Timeline" style="width:100%">

  <figcaption>Explore Horizontal & Vertical Layouts in React Timeline</figcaption>

</figure>
## <a name="Display">Display Additional Information</a>

The Timeline component supports enhancing each item with supplementary information alongside the main content. Placed opposite to the main content, this additional information enriches the context of every item, making it a valuable addition to the user experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Display-Timeline-information-in-React.png" alt="Display Timeline information in React" style="width:100%">

  <figcaption>Display Timeline information in React</figcaption>

</figure>
### <a name="Items">Items alignment</a>

The React Timeline component supports aligning the items’ content and opposite content as follows:

- **Before:** Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom).
- **After:** The default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top).
- **Alternate:** Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items.
- **AlternateReverse:** Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Flexible-Alignment-Options-for-Items-in-React-Timeline.gif" alt="Flexible Alignment Options for Items in React Timeline" style="width:100%">

  <figcaption>Flexible Alignment Options for Items in React Timeline</figcaption>

</figure>
### <a name="Reverse">Reverse Timeline</a>

Display timeline items in reverse order, considering the alignment of items, offering flexibility and enhancing the user experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Showing-Timeline-in-Reverse-Order-in-React-Timeline.gif" alt="Showing Timeline in Reverse Order in React Timeline" style="width:100%">

  <figcaption>Showing Timeline in Reverse Order in React Timeline</figcaption>

</figure>
### <a name="Customization">Customization of displaying items using templates</a>

The React Timeline component allows you to customize the default appearance, including styling dot items and templating content, providing high flexibility and control over the timeline’s presentation.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Templates-in-React-Timeline.png" alt="Templates in React Timeline" style="width:100%">

  <figcaption>Templates in React Timeline</figcaption>

</figure>

## Getting started with the React Timeline component.

Let’s create a React application and configure the Syncfusion [React Timeline](https://ej2.syncfusion.com/react/documentation/timeline/getting-started "Getting Started with the React Timeline component") component.

#### Step 1: Create a new React application

First, ensure you have all the [prerequisites](https://ej2.syncfusion.com/react/documentation/system-requirement "System Requirements for React Components") to run a React app. Then, create a React app using the below command.

```
npx create-react-app my-app
```

#### Step 2: Adding Syncfusion packages

Syncfusion React packages are available in the [NPM](https://www.npmjs.com/~syncfusionorg "Syncfusion NPM parckage registry") registry. To install the packages required for the **Timeline** component, use the following command.

```
npm install @syncfusion/ej2-react-layouts --save
```

#### Step 3: Adding CSS reference

Now, import the required CSS styles for the Timeline component and dependency styles in the **src/App.css** file. Refer to the following code.

```js
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material3.css';

```

#### Step 4: Adding Timeline component to the application

We have completed all the necessary configurations for rendering the Syncfusion React components. Now, let’s add the Timeline component by following these steps:

1. Import the **TimelineComponent** from the **ej2-react-layouts** package and add the TimelineComponent tag in the **App.js** file.
2. To define each item, you can use the **ItemDirective** tag inside the **ItemsDirective**, as shown in the following code.
```js
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './App.css';

function App() {
  return (
    <div id='timeline' style={{ height: "350px" }}>
      <TimelineComponent>
          <ItemsDirective>
              <ItemDirective content='Order Confirmed' />
              <ItemDirective content='Shipped' />
              <ItemDirective content='Out For Delivery' />
              <ItemDirective content='Delivered' />
          </ItemsDirective>
      </TimelineComponent>
    </div>
  );
}

export default App;
```

#### Step 5: Running the application

Finally, run the application in the browser using the following command.

```
npm start
```

Once the web server is loaded, you can find the following output by opening the React app in the browser at port **localhost:3000**.

After executing the above code examples, we will get the following output.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Integrating-Timeline-component-in-a-React.png" alt="Integrating Timeline component in a React" style="width:100%">

  <figcaption>Integrating Timeline component in a React</figcaption>

</figure>

## References

For more details, refer to the [React Timeline component demos](https://ej2.syncfusion.com/react/demos/#/material3/timeline/default "React Timeline component live demos") and [documentation](https://ej2.syncfusion.com/react/documentation/timeline/getting-started "Getting Started with the React Timeline component").

## Supported Platforms

The Timeline component is also available on the following platforms. 
<table width="601">
<tbody>
<tr>
<td width="199">
<p><strong>Platform </strong></p>
</td>
<td width="200">
<p><strong>Live Demo </strong></p>
</td>
<td width="202">
<p><strong>Documentation </strong></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="JavaScript Timeline Control" href="https://www.syncfusion.com/javascript-ui-controls/js-timeline" target="_blank" rel="noopener">JavaScript</a></p>
</td>
<td width="200">
<p><a title="JavaScript Timeline live demos" href="https://ej2.syncfusion.com/demos/#/material3/timeline/default" target="_blank" rel="noopener">JavaScript Timeline Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with JavaScript Timeline" href="https://ej2.syncfusion.com/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with JavaScript Timeline</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="Angular Timeline Control" href="https://www.syncfusion.com/angular-components/angular-timeline" target="_blank" rel="noopener">Angular</a></p>
</td>
<td width="200">
<p><a title="Angular Timeline live demos" href="https://ej2.syncfusion.com/angular/demos/#/material3/timeline/default" target="_blank" rel="noopener">Angular Timeline Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with Angular Timeline" href="https://ej2.syncfusion.com/angular/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with Angular Timeline</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="Vue Timeline Control" href="https://www.syncfusion.com/vue-components/vue-timeline" target="_blank" rel="noopener">Vue</a></p>
</td>
<td width="200">
<p><a title="Vue Timeline live demos" href="https://ej2.syncfusion.com/vue/demos/#/material3/timeline/default" target="_blank" rel="noopener">Vue Timeline Demos</a></p>
</td>
<td width="202">
<p><a title="Getting Started with Vue Timeline" href="https://ej2.syncfusion.com/vue/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with Vue Timeline</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="ASP.Net Core Timeline Control" href="https://www.syncfusion.com/aspnet-core-ui-controls/timeline" target="_blank" rel="noopener">ASP.Net Core</a></p>
</td>
<td width="200">
<p><a title="ASP.Net Core Timeline live demos" href="https://ej2.syncfusion.com/aspnetcore/Timeline/Default#/material3" target="_blank" rel="noopener">ASP.Net Core Timeline Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with ASP.Net Core Timeline" href="https://ej2.syncfusion.com/aspnetcore/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with ASP.Net Core Timeline</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="ASP.Net MVC Timeline Control" href="https://www.syncfusion.com/aspnet-mvc-ui-controls/timeline" target="_blank" rel="noopener">ASP.Net MVC</a></p>
</td>
<td width="200">
<p><a title="ASP.Net MVC Timeline live demos" href="https://ej2.syncfusion.com/aspnetmvc/Timeline/Default#/material3" target="_blank" rel="noopener">ASP.Net MVC Timeline Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with ASP.Net MVC Timeline" href="https://ej2.syncfusion.com/aspnetmvc/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with ASP.Net MVC Timeline</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="Blazor Timeline Control" href="https://www.syncfusion.com/blazor-components/blazor-timeline" target="_blank" rel="noopener">Blazor</a></p>
</td>
<td width="200">
<p><a title="Blazor Timeline live demos" href="https://blazor.syncfusion.com/demos/timeline/default-functionalities?theme=fluent" target="_blank" rel="noopener">Blazor Timeline Demos</a></p>
</td>
<td width="202">
<p><a title="Getting Started with Blazor Timeline" href="https://blazor.syncfusion.com/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with Blazor Timeline</a></p>
</td>
</tr>
</tbody>
</table>

## Conclusion

Thanks for reading! This blog shows the features of the new Syncfusion [React Timeline](https://www.syncfusion.com/react-components/react-timeline "React Timeline Control") component that rolled out in our [2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release. These features are also listed on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v25.1.35 "Essential Studio Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try out the component and share your feedback as comments on this blog.

You can also reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We’re here to assist you every step of the way!

## Related blogs

- [Should We Switch from Redux to Redux ToolKit?](https://www.syncfusion.com/blogs/post/switch-redux-to-redux-toolkit "Blog: Should We Switch from Redux to Redux ToolKit?")
- [Top 8 React Libraries for Building Beautiful and Functional UIs](https://www.syncfusion.com/blogs/post/top-react-libraries-build-ui "Blog: Top 8 React Libraries for Building Beautiful and Functional UIs")
- [Level Up Your React Charts: Mastering Scrollbar Customization](https://www.syncfusion.com/blogs/post/customize-react-charts-scrollbar "Blog: Level Up Your React Charts: Mastering Scrollbar Customization")
- [Top 7 Ways to Write CSS in Your React or Next.js App](https://www.syncfusion.com/blogs/post/write-css-react-next-js "Blog: Top 7 Ways to Write CSS in Your React or Next.js App")