Create Collapsible Accordions Using Ant Design UI In ReactJS

Abhishek Saini
1y
11k
0
1

Article

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.

A collapse is a content area that can be collapsed and expanded. It can be used to group or hide complex regions to keep the page clean.

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 Collapsible Accordions of Ant Design UI in React js.

Here we will follow the steps for creating Collapsible Accordions.

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.

Create Collapse Using Ant Design UI In ReactJS

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

import React from 'react';
import './App.css';

import { Collapse, Divider } from 'antd';

const { Panel } = Collapse;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

function App() {
  return (
    <div className="App">
        <Divider orientation="left">Default Size</Divider>
    <Collapse>
      <Panel header="This is default size panel header" key="1">
        <p>{text}</p>
      </Panel>
    </Collapse>
    <Divider orientation="left">Small Size</Divider>
    <Collapse size="small">
      <Panel header="This is small size panel header" key="1">
        <p>{text}</p>
      </Panel>
    </Collapse>
    <Divider orientation="left">Large Size</Divider>
    <Collapse size="large">
      <Panel header="This is large size panel header" key="1">
        <p>{text}</p>
      </Panel>
    </Collapse>
    <br></br>
    <br></br>
    <br></br>
    <br></br>

    <Collapse accordion>
    <Panel header="This is panel header 1" key="1">
      <p>{text}</p>
    </Panel>
    <Panel header="This is panel header 2" key="2">
      <p>{text}</p>
    </Panel>
    <Panel header="This is panel header 3" key="3">
      <p>{text}</p>
    </Panel>
  </Collapse>


    </div>
  );
}

export default App;

Step 4. Add the below code in package.json

{
  "name": "collapseappant",
  "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.