React MUI Drawer API

MUI is a user interface library that provides predefined and customizable React components for faster and easy web development. MUI offers a comprehensive suite of UI tools that help in shipping new features faster. In this article let’s discuss the TablePagination API offered by the MUI library.

The Drawer component is basically a panel that slides in from the edge of the screen. It is used to display multiple navigation links. The Drawer can be opened to perform one or more actions and when closed the panel will slide out to the edge once again. In this way, it helps in reducing UI clutter. In this article, we will learn about the MUI Drawer API which is the backbone of the Drawer component.

Syntax:

<Drawer>
    <MenuItem>Foo</MenuItem>
    <MenuItem>Bar</MenuItem>
</Drawer>

Creating React App:

Step 1: Initializing app using create-react-app.

npx create-react-app myApp

Step 2: Go inside the project directory.

cd myApp

Installing MUI: It can be easily installed using package managers such as npm or yarn.

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

yarn add @mui/material @emotion/react @emotion/styled

Importing MUI Drawer API to the project:

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

Props list:

anchor: It provides the side from which the drawer will appear. It can be one of the four values – left, right, top, or bottom.
children: It is the content of the Drawer component.
classes: It is to override or extend the styles applied to the component.
elevation: It gives the elevation of the drawer or the height to which the drawer is elevated. The default value is 16.
hideBackdrop: It is a boolean value that suggests whether the backdrop should be hidden or not. If set to true the backdrop is not rendered.
onClose: It is a call-back function that is fired when the drawer requests to be closed.
open: It is a boolean value that tells whether the drawer is open or not. By default it is false. If it is set to true the drawer will be shown.
sx: This is the system prop. This allows us to define additional CSS styles for the component.
transitionDuration: It is the duration of the transition in milliseconds. We can apply a single timeout for all transitions or individually.
variant: It is the type of the variant of the drawer to be displayed. It can be a permanent variant, a persistent variant, or a temporary variant. By default it is temporary.
Apart from the above-listed props, all the props of ModalProps, PaperProps, and SlideProps are also applied to the Drawer component.

CSS Rules:

root: It is the style that is applied to the root element. The global class is.MuiDrawer-root
docked: This CSS rule states that the styles will be applied to the root element only if the variant of the drawer is either permanent or persistent.
paper: The styles will be applied to the Paper component. The global class is.MuiDrawer-paper
paperAnchorLeft: This rule states that the styles will be applied to the Paper component only if the anchor is set to left.
paperAnchorRight: This rule states that the styles will be applied to the Paper component only if the anchor is set to right.
paperAnchorTop: This rule states that the styles will be applied to the Paper component only if the anchor is set to the top.
paperAnchorBottom: This rule states that the styles will be applied to the Paper component only if the anchor is set to the bottom.
paperAnchorDockedLeft: This rule states that the styles will be applied to the Paper component only if the anchor is set to the left and the variant is set as either permanent or persistent.
paperAnchorDockedTop: This rule states that the styles will be applied to the Paper component only if the anchor is set to top and the variant set as either permanent or persistent.
paperAnchorDockedRight: This rule states that the styles will be applied to the Paper component only if the anchor is set to the right and the variant is set as either permanent or persistent.
paperAnchorDockedBottom: This rule states that the styles will be applied to the Paper component only if the anchor is set to the bottom and the variant is set as either permanent or persistent.
modal: It defines styles that are applied to the Modal component.

Example1: In this example, we will create the temporary drawer that opens above all the content of the page like a modal with a shadowy background. It can be toggled open or closed. By default, the temporary drawer is closed. Let us create a basic temporary drawer using Drawer API from MUI.

Javascript

import * as React from "react"; 

import Drawer from "@mui/material/Drawer"; 

import Button from "@mui/material/Button"; 

import MenuItem from "@mui/material/MenuItem"; 

export default function TemporaryDrawer() { 

    const [open, setOpen] = React.useState(false); 

    function handleOpen() { 

        setOpen(!open); 

    } 

    function handleClose() { 

        setOpen(false); 

    } 

    return ( 

        <> 

            <Button onClick={handleOpen}  

                variant="outlined" color="success"> 

                Toggle Drawer 

            </Button> 

            <Drawer anchor={"left"} open={open}  

                onClose={handleClose}> 

                <MenuItem>Geek</MenuItem> 

                <MenuItem>Geeks</MenuItem> 

                <MenuItem>GeeksForGeeks</MenuItem> 

            </Drawer> 

        </> 

    ); 
}

Output:

A basic temporary drawer

Example2: In this example, we are creating permanent drawers which are always visible. They remain at the left of the page and at the same level as the content of the page. Permanent drawers cannot be closed. The below code generates a permanent drawer that remains open.

Javascript

import * as React from "react"; 

import Box from "@mui/material/Box"; 

import Drawer from "@mui/material/Drawer"; 

import CssBaseline from "@mui/material/CssBaseline"; 

import AppBar from "@mui/material/AppBar"; 

import Toolbar from "@mui/material/Toolbar"; 

import List from "@mui/material/List"; 

import Typography from "@mui/material/Typography"; 

import Divider from "@mui/material/Divider"; 

import ListItem from "@mui/material/ListItem"; 

import ListItemButton from "@mui/material/ListItemButton"; 

import ListItemIcon from "@mui/material/ListItemIcon"; 

import ListItemText from "@mui/material/ListItemText"; 

import CodeIcon from "@mui/icons-material/Code"; 

import DeveloperModeIcon from "@mui/icons-material/DeveloperMode"; 

const drawerWidth = 240; 

export default function PermanentDrawerLeft() { 

    return ( 

        <Box sx={{ display: "flex" }}> 

            <CssBaseline /> 

            <AppBar 

                position="fixed"

                sx={{ width: `calc(100% - ${drawerWidth}px)`,  

                    ml: `${drawerWidth}px` }} 

                color="success"

            > 

                <Toolbar> 

                    <Typography variant="h6" noWrap component="div"> 

                        GeeksForGeeks 

                    </Typography> 

                </Toolbar> 

            </AppBar> 

            <Drawer 

                sx={{ 

                    width: drawerWidth, 

                    flexShrink: 0, 

                    "& .MuiDrawer-paper": { 

                        width: drawerWidth, 

                        boxSizing: "border-box"

                    } 

                }} 

                variant="permanent"

                anchor="left"

            > 

                <Toolbar /> 

                <Divider /> 

                <List> 

                    {["Practice", "Write", "DSA",  

                        "Technical Scripter"].map( 

                        (text, index) => ( 

                            <ListItem key={text} disablePadding> 

                                <ListItemButton> 

                                    <ListItemIcon> 

                                        {index % 2 === 0 ? <CodeIcon /> :  

                                        <DeveloperModeIcon />} 

                                    </ListItemIcon> 

                                    <ListItemText primary={text} /> 

                                </ListItemButton> 

                            </ListItem> 

                        ) 

                    )} 

                </List> 

            </Drawer> 

            <Box 

                component="main"

                sx={{ flexGrow: 1, bgcolor: "background.default", p: 3 }} 

            > 

                <Toolbar /> 

                <Typography paragraph> 

                    Greetings to all the Geeks out there! We  

                    welcome you to the platform where we consistently 

                    strive to offer the best of education. This 

                    platform has been designed for every geek  

                    wishing to expand their knowledge, share their 

                    knowledge and is ready to grab their dream job. 

                    We have millions of articles, live as wellas 

                    online courses, thousands of tutorials and  

                    much more just for the geek inside you.  

                    Thank you for choosing and supporting us! 

                </Typography> 

            </Box> 

        </Box> 

    ); 
}