React MUI Collapse API

0 0 4 minutes read

The Material-UI is an open-source library for Creating user interfaces with Material Design principles in React. Material Design is a design language that provides a consistent look and feel on all platforms and devices. Material-UI provides a set of pre-built components, making it easier for developers to create beautiful and consistent UI.

The Material-UI Collapse component is a way to hide and reveal content on a web page using a smooth transition. It is built on top of the Transition component in Material-UI.
It is easy to use and customize and provides several props and utility functions that can be used to control the animation programmatically. It can be used with components like a Card and list.

Import Collapse API:

import Collapse from '@mui/material/Collapse';
// or
import { Collapse } from '@mui/material';

Props List:

addEndListener: It allows us to add a custom transition end trigger.
children: It is used to denote the content node to be Collapsed.
classes: It is to override or extend the styles applied to the components.
collapsedSize: It is used to change the width or height of the container when collapsed. By default, it’s set to “0px”.
component: It is the component used for the root node.
easing: It’s a transition timing function.
in: It takes a boolean value to transition. The default is set to false and can be transitioned in when set to “true”.
orientation: It is the orientation of the transition. By default, it is set to vertical and can be changed to horizontal.
sx: This prop is used to add custom CSS styles.
timeout: It is used to specify a single timeout for all transitions, or individually with an object.

CSS Rules:

root(MuiCollapse-root): The style applied to the root element.
horizontal (MuiCollapse-horizontal): It is applied to the root element if the orientation=”horizontal”.
entered(MuiCollapse-entered): It is applied to the root element when the transition has entered.
hidden(MuiCollapse-hidden): It is applied to the root element when the transition has exited.
wrapperInner(MuiCollapse-wrapperInner): The styles are applied to the inner wrapper element.

Inheritance: The props from the Transition component from the react-transition-group are also available on Collapse. Various transitions can be achieved with this component.

Approach: Create a React project and install React MUI module.

Creating React Project:

Step 1: Create a react app. Use the command below.

npx create-react-app project_name

Step 2: Move into the folder to perform different operations.

cd project_name

Step 3: Installing MUI modules.

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/icons-material

Project Structure:

Example 1: We are creating a UI that shows React MUI Collapse API.

Filename: App.js

Javascript

import { useState } from "react"; 
import Card from "@mui/material/Card"; 
import Collapse from "@mui/material/Collapse"; 
import CardHeader from "@mui/material/CardHeader"; 
import Container from "@mui/material/Container"; 
import CardContent from "@mui/material/CardContent"; 
import KeyboardArrowDownIcon from  
    "@mui/icons-material/KeyboardArrowDown"; 
import KeyboardArrowUpIcon from  
    "@mui/icons-material/KeyboardArrowUp"; 
import IconButton from "@mui/material/IconButton"; 
  
export default function App() { 
    const [open, setOpen] = useState(false); 
    return ( 
        <> 
            <h1 style={{ 
                display: "flex",  
                justifyContent: "center", 
                color: "green"
            }}> 
                GeeksForGeeks 
            </h1> 
            <Card sx={{ 
                minWidth: 300, 
                border: "1px solid rgba(211,211,211,0.6)"
            }}> 
                <CardHeader 
                    title="Complete Interview Preparation"
                    action={ 
                        <IconButton 
                            onClick={() => setOpen(!open)} 
                            aria-label="expand"
                            size="small"
                        > 
                            {open ? <KeyboardArrowUpIcon /> 
                                : <KeyboardArrowDownIcon />} 
                        </IconButton> 
                    } 
                ></CardHeader> 
                <div style={{  
                    backgroundColor: "rgba(211,211,211,0.4)" 
                }}> 
                    <Collapse in={open} timeout="auto"
                        unmountOnExit> 
                        <CardContent> 
                            <Container sx={{  
                                height: 100,  
                                lineHeight: 2  
                            }}> 
                                An interview-centric course  
                                designed to prepare you for 
                                the role of SDE for both 
                                product and service-based  
                                companies. A placement  
                                preparation pack built with
                                years of expertise. Learn  
                                Resume Building, C++, Java,  
                                DSA, CS Theory concepts, 
                                Aptitude, Reasoning, LLD,  
                                and much more! 
                            </Container> 
                        </CardContent> 
                    </Collapse> 
                </div> 
            </Card> 
        </> 
    ); 
} 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: We are creating a UI that shows React MUI Collapse API with list.

Filename: App.js

Javascript

import * as React from "react"; 
import ListSubheader from "@mui/material/ListSubheader"; 
import List from "@mui/material/List"; 
import ListItemButton from "@mui/material/ListItemButton"; 
import ListItemIcon from "@mui/material/ListItemIcon"; 
import ListItemText from "@mui/material/ListItemText"; 
import Collapse from "@mui/material/Collapse"; 
import DraftsIcon from "@mui/icons-material/Drafts"; 
import ExpandLess from "@mui/icons-material/ExpandLess"; 
import ExpandMore from "@mui/icons-material/ExpandMore"; 
  
import PersonIcon from "@mui/icons-material/Person"; 
import EditIcon from "@mui/icons-material/Edit"; 
import FaceRetouchingNaturalIcon from  
    "@mui/icons-material/FaceRetouchingNatural"; 
import ArticleIcon from "@mui/icons-material/Article"; 
import LogoutIcon from "@mui/icons-material/Logout"; 
  
export default function NestedList() { 
    const [open, setOpen] = React.useState(true); 
  
    const handleClick = () => { 
        setOpen(!open); 
    }; 
  
    return ( 
        <> 
            <h1 style={{ color: "green" }}> 
                GeeksForGeeks</h1> 
  
            <List 
                sx={{ 
                    width: "100%", maxWidth: 360, 
                    bgcolor: "background.paper"
                }} 
                component="nav"
                aria-labelledby="nested-list-subheader"
                subheader={ 
                    <ListSubheader component="div"
                        id="nested-list-subheader"> 
                        Setting 
                    </ListSubheader> 
                } 
            > 
                <ListItemButton> 
                    <ListItemIcon> 
                        <PersonIcon /> 
                    </ListItemIcon> 
                    <ListItemText primary="My Profile" /> 
                </ListItemButton> 
                <ListItemButton> 
                    <ListItemIcon> 
                        <DraftsIcon /> 
                    </ListItemIcon> 
                    <ListItemText primary="My Courses" /> 
                </ListItemButton> 
                <ListItemButton onClick={handleClick}> 
                    <ListItemIcon> 
                        <EditIcon /> 
                    </ListItemIcon> 
                    <ListItemText primary="Edit" /> 
                    {open ? <ExpandLess /> : <ExpandMore />} 
                </ListItemButton> 
                <Collapse in={open} timeout="auto" unmountOnExit> 
                    <List component="div" disablePadding> 
                        <ListItemButton sx={{ pl: 4 }}> 
                            <ListItemIcon> 
                                <FaceRetouchingNaturalIcon /> 
                            </ListItemIcon> 
                            <ListItemText primary="Edit Profile" /> 
                        </ListItemButton> 
  
                        <ListItemButton sx={{ pl: 4 }}> 
                            <ListItemIcon> 
                                <ArticleIcon /> 
                            </ListItemIcon> 
                            <ListItemText primary="Edit Articles" /> 
                        </ListItemButton> 
                    </List> 
                </Collapse> 
  
                <ListItemButton> 
                    <ListItemIcon> 
                        <LogoutIcon /> 
                    </ListItemIcon> 
                    <ListItemText primary="Logout" /> 
                </ListItemButton> 
            </List> 
        </> 
    ); 
} 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://mui.com/material-ui/api/collapse/

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!