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
Project Structure:
Example: Now write the following code in filename App.js.
App.js
import { Timeline } from "antd"; import "antd/dist/antd.css";   function App() {   return (     <div className="App">       <div style={{ padding: "100px" }}>         <h1 style={{ marginBottom: "2rem" }}>           Demo for Timeline         </h1>         /* Time Creating */        <Timeline>           /* Timeline elements*/          <Timeline.Item>             Create a services site 2015-09-01           </Timeline.Item>           <Timeline.Item>             Solve initial network problems 2015-09-01           </Timeline.Item>           <Timeline.Item>             Technical testing 2015-09-01           </Timeline.Item>           <Timeline.Item>             Network problems being solved 2015-09-01           </Timeline.Item>         </Timeline>         ,       </div>     </div>   ); }   export default App; |
Running the application: Run the application by using the following command.
npm start
Output: Now open your browser and go to http://localhost:3000/, You will see the following output.
Reference: https://ant.design/components/timeline/
