How To Create timeline Using Ant Design UI In ReactJS

Introduction

An enterprise-class UI design language and React UI library with high-quality React components, one of the best React UI libraries for enterprises.

We use a timeline when a series of information needs to be ordered by time (ascending or descending) and when you need a timeline to make a visual connection.

Preconditions

  • Javascript
  • Basic knowledge of React JS
  • Node.js
  • V.S. Code,Visual Studio
  • typescript

We cover the below things in this article: 

  • Create React application
  • Installation of Ant Design UI
  • How to create a timeline of Ant Design UI in React js.

Here we will follow the steps for creating a timeline.

Step 1. Run the below command to create a React.js project.

npx create-react-app my-app --template typescript

Step 2. Run the below command to install Ant Design UI.

npm i @ant-design/icons
npm i antd

Create the files according to the below image.

Files

Step 3. Add the below code in the App.tsx.


import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Timeline } from 'antd';


function App() {
  return (
      <Timeline style={{marginTop: '100px', marginLeft: '200px'}}
    items={[
      {
        children: 'Create a services site 2015-09-01',
      },
      {
        children: 'Solve initial network problems 2015-09-01',
      },
      {
        children: 'Technical testing 2015-09-01',
      },
      {
        children: 'Network problems being solved 2015-09-01',
      },
    ]}
  />
  );
}

export default App;

Step 4. Add the below code in package.json


{
  "name": "timelineappant",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^5.1.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.34",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
    "antd": "^5.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step 5. Run the below command to run the application.

npm start

After running this command, we will get this Timeline.

Files

Summary

In this article, we learned how to create a Timeline using Ant Design UI with React JS and Typescript.


Similar Articles