ReactJS UI Ant Design Timeline Component

Last Updated : 16 Mar, 2021

Timeline is used to display a series of information that needs to be ordered by time (ascending or descending).

Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Timeline component using the following approach easily.

Syntax:

<Timeline>
 <Timeline.Item>
 Content of the timeline
 </Timeline.Item>
</Timeline>

Timeline Property:

mode: This property defines the alignment of the timeline.
pending: This property set the last post nodes existence or it's content.
pendingDot: This property set the dot of the last ghost if pending is true.
reverse: This property defines that nodes will be reverse or not.

Timeline.Item Property:

color: This property defines the color of the timeline item, default is blue.
dot: This property defines the customize timeline dot.
label: This property set the label.
position: This property defines the timeline position.

Creating React Application and Installing Module:

Step 1: Create a React application using the following command.
```
npx create-react-app demo
```
Step 2: After creating your project folder i.e. demo, move to it using the following command.
```
cd demo
```
Step 3: After creating the ReactJS application, Install the antd library using the following command.
```
npm install antd
```