Create Collapsible Accordions 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.

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.

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.

npm start

After running this command, we will get this Table.

Summary

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