React MUI Accordion Surface
Last Updated :
30 Dec, 2022
React MUI is a UI library that provides fully loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Accordion Surface. The accordion component is a lightweight container that shows and hides sections of related content on a page.
MUI Accordion Surface Variants: The card surface has a default version. Another variant is given below.
- Basic accordion: It is the default accordion in react mui.
- Controlled accordion: It extends the default behavior to create an accordion with the component.
- Customization: The accordion surface can also be customized.
- Performance: To optimize the usage of multiple accordions, make sure to change the default behavior by enabling the unmountOnExit in the TransitionProps prop.
- Accessibility: Use id and aria-controls on the AccordionSummary to have optimal accessibility.
Syntax:
<Accordion>
...
</Accordion>
Creating a React Application Project:
Step 1: To create a react app, install react modules through the npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application:
npm start
Example 1: Below example demonstrates the React MUI basic accordion surface component.
Javascript
import React from "react" ;
import Accordion from "@mui/material/Accordion" ;
import AccordionSummary from "@mui/material/AccordionSummary" ;
import AccordionDetails from "@mui/material/AccordionDetails" ;
import Typography from "@mui/material/Typography" ;
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' ;
function App() {
return (
<div>
<div style={{ textAlign: "center" ,
color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Card Surface</h2>
</div>
<center>
<div style={{ width: 500 }}>
<Accordion style={{ backgroundColor: '#8AFF89' }}>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}>
<Typography>Courses</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</Typography>
</AccordionDetails>
</Accordion>
<Accordion style={{ backgroundColor: '#8AFF89' }}>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}>
<Typography>Tutorials</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<li>DSA</li>
<li>Algorithms</li>
<li>Web Development</li>
</Typography>
</AccordionDetails>
</Accordion>
<Accordion style={{ backgroundColor: '#8AFF89' }}>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}>
<Typography>Practice</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<li>Problem of the Day</li>
<li>All DSA Problems</li>
</Typography>
</AccordionDetails>
</Accordion>
</div>
</center>
</div>
);
}
export default App;
|
Output:
Example 2: Below example demonstrates the React MUI-controlled accordion surface component.
Javascript
import React, { useState } from "react" ;
import Accordion from "@mui/material/Accordion" ;
import AccordionSummary from "@mui/material/AccordionSummary" ;
import AccordionDetails from "@mui/material/AccordionDetails" ;
import Typography from "@mui/material/Typography" ;
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown" ;
function App() {
const [open, setOpen] = useState( false );
const accChange = (card) => (e, isOpen) => {
setOpen(isOpen ? card : false );
};
return (
<div>
<div style={{ textAlign: "center" ,
color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Card Surface</h2>
</div>
<div style={{ width: 500, marginLeft: 100 }}>
<Accordion
expanded={open === "accordionFirst" }
onChange={accChange( "accordionFirst" )}
>
<AccordionSummary expandIcon={<ArrowDropDownIcon />}>
<Typography sx={{ width: "50%" }}>
Courses
</Typography>
<Typography>
Premium Programming courses..
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Buy courses to advance your skills in coding.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={open === "accordionSecond" }
onChange={accChange( "accordionSecond" )}
>
<AccordionSummary expandIcon={<ArrowDropDownIcon />}>
<Typography sx={{ width: "50%" }}>
Tutorials
</Typography>
<Typography>
Millions of articles on platform.
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Find millions of technical articles
related to coding,
programming, etc.
</Typography>
</AccordionDetails>
</Accordion>
</div>
</div>
);
}
export default App;
|
Output:
Reference: https://mui.com/material-ui/react-accordion/
Share your thoughts in the comments
Please Login to comment...