React MUI Modal 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 Modal API. Modals are the foundation that provides the framework for popups, dialogs, lightboxes, etc. The API provides a lot of functionality and we will learn to implement them.

Import Modal API

import Modal from '@mui/material/Modal';
// or
import { Modal } 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 single child content element.
• 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.
• open (bool): If set to true, the component is visible. The default value is false.
• BackdropComponent (elementType): It is used to set the backdrop component. The default component is a styled BackdropComponent.
• BackdropProps (object): It applies to the backdrop component.
• closeAfterTransition (bool): If set to true, the component ways until a nested transition is completed before closing. The default value is set to false.
• components (elementType): It is the list of components used for each slot inside the Modal. The default value is an empty array.
• componentsProps (func, object): It is the props used for each slot inside the Modal. The default value is an empty array.
• container (HTML): It is the container that will have the portal children appended to it.
• disableAutoFocus (bool): If set to true, the modal will not shift focus towards itself. The default value is set to false.
• disableEnforceFocus (bool): If set to true, the modal will not prevent focus from leaving the modal while open. The default value is set to false.
• disableEscapeKeyDown (bool): If set to true, the modal will not exit on pressing of Esc button. The default value is set to false.
• disablePortal (bool): The children will be under the DOM hierarchy of the parent component. The default value is set to false.
• disableRestoreFocus (bool): If set to true, the modal will not restore focus to the previously focused element once the modal is hidden or unmounted. The default value is set to false.
• disableScrollLock (bool): Disable the scroll lock behavior. The default value is set to false.
• hideBackdrop (bool): If set to true, the backdrop is not rendered. The default value is set to false.
• keepMounted (bool): If set to true, the component is kept mounted on the dom even after closing. The default value is set to false.
• onBackdropClick (function): It is used to set the callback function when the backdrop is clicked on.
• onClose (function): It is used to set the callback function when the modal is closed.

CSS Rules:

• root (.MuiModal-root): It is the style applied to the root element.
• hidden (.MuiModal-hidden): It is the style applied to the root element if the Modal has exited.

Syntax: Create a Modal as follows:

<Modal open={open} onClose={handleClose}>
    Content
</Modal>

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

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have a basic Modal.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";

const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4,
};

function App() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div className="App">
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Modal API</strong>
            </div>
            <br />
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Button onClick={handleOpen}>
                    Open modal
                </Button>
            </div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={style}>
                    <Typography id="modal-modal-title"
                        variant="h6" component="h2">
                        Welcome to GeeksforGeeks
                    </Typography>
                    <Typography id="modal-modal-description"
                        sx={{ mt: 2 }}>
                        A computer science portal for geeks
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have animated the backdrop component.

App.js

import "./App.css";
import * as React from "react";
import Backdrop from "@mui/material/Backdrop";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4,
};
function App() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div className="App">
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Modal API</strong>
            </div>
            <br />
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Button onClick={handleOpen}>
                    Open modal
                </Button>
            </div>
            <Modal
                open={open}
                onClose={handleClose}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 1500,
                }}
            >
                <Box sx={style}>
                    <Typography id="modal-modal-title"
                        variant="h6" component="h2">
                        Welcome to GeeksforGeeks
                    </Typography>
                    <Typography id="modal-modal-description"
                        sx={{ mt: 2 }}>
                        A computer science portal for geeks
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

export default App;

Output:

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