React-Bootstrap Custom Accordions are user-defined collapsible panels or sections in a web application built with React and the React-Bootstrap library. Developers can customize their behavior and appearance to create interactive and styled accordion components for displaying content.
Prerequisite:
We will implement custom accordions using the following approaches
Table of Content
Steps to create the project:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap
npm install bootstrap
Project Structure:
Approach 1: Using React-Bootstrap Components
- In this approach we use React-Bootstrap components, such as Accordion, Card, and Button, to build an interactive accordion menu.
- State Management: It employs React’s useState hook to manage the active accordion section, providing a smooth user experience.
- Dynamic Content: The accordion dynamically renders sections with titles and content, making it ideal for displaying expandable information in a neat format.
Example: Below is the implementation of the above approach
import React, { useState } from "react" ;
import Accordion from "react-bootstrap/Accordion" ;
import Card from "react-bootstrap/Card" ;
import Button from "react-bootstrap/Button" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
function AccordionMenu() {
// Set the default active key
const [activeKey, setActiveKey] = useState( "0" );
const sections = [
{
title: "HTML" ,
content: `HTML stands for HyperText Markup Language.
It is used to design the web pages.
With the help of HTML, you can create
a complete website structure. HTML is the
combination of Hypertext and Markup language.`
},
{
title: "CSS" ,
content: `CSS (Cascading Style Sheets) is used to
styles web pages. Cascading Style Sheets
are fondly referred to as CSS. The reason
for using this is to simplify the process
of making web pages presentable.`
},
{
title: "JavaScript" ,
content: `JavaScript is a lightweight,
cross-platform, single-threaded...`
}
];
const handleAccordionClick = (index) => {
setActiveKey(activeKey ===
index ? null : index);
};
return (
<div className= "container" >
<h2 className= "text-success" >
GeeksforGeeks
</h2>
<h3>Accordion menu</h3>
<Accordion activeKey={activeKey}>
{sections.map((section, index) => (
<Card key={index}>
<Card.Header>
<Accordion.Toggle
as={Button}
variant= "link"
// Convert index to a string
eventKey={index.toString()}
onClick={
() =>
handleAccordionClick(index.toString())}>
{section.title}
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse
eventKey={index.toString()}>
<Card.Body>
{section.content}
</Card.Body>
</Accordion.Collapse>
</Card>
))}
</Accordion>
</div>
);
} export default AccordionMenu;
|
Output:
Approach 2: Using useState to manage accordion.
- Using React’s useState hook to manage accordion content and user input, ensuring dynamic and responsive data handling.
- Implement event handlers for input changes and accordion toggles, synchronizing user input with corresponding accordion box content.
- Using React-Bootstrap components (Accordion, Card, Button, Form) for UI elements
Example: Below is the implementation of the above approach
import React, { useState } from "react" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
import { Accordion, Card, Button, Form } from "react-bootstrap" ;
export default function App() {
const [accordionData, setAccordionData] = useState({
0: "Greetings from Accordion Box 1 :)" ,
1: "Greetings from Accordion Box 2 :)"
});
const [userInput, setUserInput] = useState({
0: "" ,
1: ""
});
const handleAccordionChange = (eventKey) => {
setAccordionData({
...accordionData,
[eventKey]: userInput[eventKey]
});
};
const handleInputChange = (event, eventKey) => {
setUserInput({
...userInput,
[eventKey]: event.target.value
});
};
return (
<div style={{ display: "block" , width: 400, padding: 30 }}>
<h4>Accordion in React-Bootstrap</h4>
<Accordion defaultActiveKey= "0" >
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant= "link" eventKey= "0" >
<span style={{ fontWeight: "bold" }}>JavaScript</span>
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey= "0" >
<Card.Body>
<Form.Group>
<Form.Control
type= "text"
placeholder= "Enter text"
value={userInput[0]}
onChange={(e) => handleInputChange(e, "0" )}
/>
<Button
variant= "primary"
onClick={() => handleAccordionChange( "0" )}
>
Update Content
</Button>
</Form.Group>
{accordionData[0]}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant= "link" eventKey= "1" >
<span style={{ fontWeight: "bold" }}>React.JS</span>
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey= "1" >
<Card.Body>
<Form.Group>
<Form.Control
type= "text"
placeholder= "Enter text"
value={userInput[1]}
onChange={(e) => handleInputChange(e, "1" )}
/>
<Button
variant= "primary"
onClick={() => handleAccordionChange( "1" )}
>
Update Content
</Button>
</Form.Group>
{accordionData[1]}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
} |
Output: