React MUI SwipeableDrawer API

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI SwipeableDrawer API. The Drawer provides extra controls and navigation on a site. Usually anchored to the left or right of the screen, it contains additional contents. The SwipeableDrawer makes the drawer swipeable. The API provides a lot of functionality and we will learn to implement them.

Import SwipeableDrawer API

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

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

• children (node): It is a component similar to the table row.
• classes (Object): Override the existing styles or add new styles to the component.
• component (elementType): It is the component used for the root node. It can be either an HTML string or a component.
• sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles
• onClose (func): This function is called when the drawer is closed.
• onOpen (func): This callback function is called when the drawer is opened.
• open (bool): If true, the drawer is shown. The default value is false.
• disableBackdropTransition (bool): If true, the backdrop animation is removed.  The default value is false.
• disableDiscovery (bool): If set to true, the touching at the edge won’t slide in the drawer for the accidental discovery of the swipe gesture.  The default value is false.
• disableSwipeToOpen (bool): If set to true, swipe to open is disabled.  The default value is false.
• hysteresis (number): Sets the speed of opening of the drawer in percentage with respect to the drawer. The default value is 0.52.
• minFlingVelocity (number): It is used to define the swipe velocity to open the drawer. The default value is 450.
• SwipeAreaProps (props): It is the element used to intercept the touches.
• swipeAreaWidth (number): It is used to set the swipe area from the screen edge to open the drawer using the swipe gesture. The default value is 20.
• transitionDuration (number): Used to set the transition duration either common or all elements individually. The default value is received from the theme data.

CSS Rules: 

• root (.MuiTableCell-root): It is the style applied to the root element.

Syntax: Create a SwipeableDrawer as follows:

<SwipeableDrawer
    anchor={anchor}
    open={state[anchor]}
     onClose={toggleDrawer(anchor, false)}
     onOpen={toggleDrawer(anchor, true)}
>
     {list(anchor)}
</SwipeableDrawer>

Installing and Creating React app, and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

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

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have a SwipeableDrawer with its contents.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import Button from "@mui/material/Button";
import List from "@mui/material/List";
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 MailIcon from "@mui/icons-material/Mail";
import WebIcon from "@mui/icons-material/Web";
function App() {
    const [state, setState] = React.useState({
        top: false,
        left: false,
        bottom: false,
        right: false,
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (
            event &&
            event.type === "keydown" &&
            (event.key === "Tab" || event.key === "Shift")
        ) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    const list = (anchor) => (
        <Box
            sx={{ width: anchor === "top" ||
                  anchor === "bottom" ? "auto" : 250 }}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {["Data Structures", "Algorithms",
                   "Web Development"].map(
                    (text, index) => (
                        <ListItem key={text} disablePadding>
                            <ListItemButton>
                                <ListItemIcon>
                                    {index % 2 === 0 ?
                                    <WebIcon /> :
                                    <MailIcon />}
                                </ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItemButton>
                        </ListItem>
                    )
                )}
            </List>
        </Box>
    );

    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI SwipeableDrawer API</strong>
            </div>
            <br />
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                {["left", "right", "top", "bottom"].map((anchor) => (
                    <React.Fragment key={anchor}>
                        <Button onClick={toggleDrawer(anchor, true)}>
                            {anchor}
                        </Button>
                        <SwipeableDrawer
                            anchor={anchor}
                            open={state[anchor]}
                            onClose={toggleDrawer(anchor, false)}
                            onOpen={toggleDrawer(anchor, true)}
                        >
                            {list(anchor)}
                        </SwipeableDrawer>
                    </React.Fragment>
                ))}
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have changed the transitionDuration to 1000ms.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import Button from "@mui/material/Button";
import List from "@mui/material/List";
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 MailIcon from "@mui/icons-material/Mail";
import WebIcon from "@mui/icons-material/Web";
function App() {
    const [state, setState] = React.useState({
        top: false,
        left: false,
        bottom: false,
        right: false,
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (
            event &&
            event.type === "keydown" &&
            (event.key === "Tab" || event.key === "Shift")
        ) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    const list = (anchor) => (
        <Box
            sx={{ width: anchor === "top" ||
                  anchor === "bottom" ? "auto" : 250 }}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {["Data Structures", "Algorithms", "
                   Web Development"].map(
                    (text, index) => (
                        <ListItem key={text} disablePadding>
                            <ListItemButton>
                                <ListItemIcon>
                                    {index % 2 === 0 ?
                                     <WebIcon /> :
                                     <MailIcon />}
                                </ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItemButton>
                        </ListItem>
                    )
                )}
            </List>
        </Box>
    );

    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI SwipeableDrawer API</strong>
            </div>
            <br />
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                {["left", "right", "top", "bottom"].map((anchor) => (
                    <React.Fragment key={anchor}>
                        <Button onClick={toggleDrawer(anchor, true)}>
                            {anchor}
                        </Button>
                        <SwipeableDrawer
                            transitionDuration={1000}
                            anchor={anchor}
                            open={state[anchor]}
                            onClose={toggleDrawer(anchor, false)}
                            onOpen={toggleDrawer(anchor, true)}
                        >
                            {list(anchor)}
                        </SwipeableDrawer>
                    </React.Fragment>
                ))}
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/swipeable-drawer/