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/