How to install and use accordion in react js?
April 07, 2023Hi Friends 👋,
Welcome To aGuideHub!
To install and use accordion in React js, you have to use the npm or yarn package manager that is how you can install the antd library into your project.
Today, I am going to show you, how to install and use accordion in react js.
Install Antd
Install the following packages to use antd in react js.
npm
npm install antdyarn
yarn install antdTable of contents
- Create a new React JS project.
- Import the Accordion component.
- Use accordion components in the project.
Let’s start with the first step.
Step 1: Create a new React JS project.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import the Accordion component.
After installing antd, you have to import your React component. To do this, add the following line to the top of your component file.
import React, { useState } from "react";
import { Collapse } from "antd";Step 3: Use accordion components in the project.
In this blog, see the short example to use Collapse and Panel component from ant design library.
<Collapse activeKey={activeKey} onChange={handleAccordionChange}>
<Panel header="Item 1" key="1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Panel>
<Panel header="Item 2" key="2">
<p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Panel>
<Panel header="Item 3" key="3">
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</Panel>
</Collapse>ReactJS use accordion example.
This code below is an example, we will import the Collapse component from antd library, use the Panel component, and provide attribute details to use accordion in react js.
App.js
import React, { useState } from "react";
import { Collapse } from "antd";
const { Panel } = Collapse;
const Accordion = () => {
const [activeKey, setActiveKey] = useState(null);
const handleAccordionChange = (key) => {
setActiveKey(key === activeKey ? null : key);
};
return (
<Collapse activeKey={activeKey} onChange={handleAccordionChange}>
<Panel header="Item 1" key="1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Panel>
<Panel header="Item 2" key="2">
<p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Panel>
<Panel header="Item 3" key="3">
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</Panel>
</Collapse>
);
};
export default Accordion;Check the output of the above code example.
Here, we are provided code sandbox links for the above program to install and use accordion in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍