React MUI Modal Util

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Modal Util. The modal component helps in providing a solid base for creating dialog boxes, popovers, lightboxes, etc. 

Modal Util variants: There is a default variant of the modal. Other modal variants are:

• Basic modal: This is the default modal util.
• Nested modal: It consists of one or more modals nested inside each other.
• Transitions: The open or closed state of the modal util can be animated with a transition component
• Performance: To optimize the usage for interaction responsiveness, make sure to change the default behavior by enabling the keepMountedprop.
• Server-side modal: In order to display this modal, disable the portal feature using the disablePortal prop, and the modal will be seen still if JavaScript is disabled.
• FocusTrap: The modal moves the focus back to the body if the focus hides which is done for accessibility.
• Accessibility: Use aria-labelledby and aria-describedby props to add accessibility.
• Unstyled: There is also an unstyled version of the modal which may be used.

Syntax:

<Button onClick={handleOpen}>Open</Button>
<Modal open={open} onClose={handleClose}>
    ...
</Modal>

Creating React Project:

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI basic Modal util.

Javascript

import React, { useState } 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%, -60%)",
    width: 300,
    bgcolor: "green",
    color: "white",
    px: 12,
    py: 8,
    borderRadius: 3
};

function App() {
    const [open, setOpen] = useState(false);

    return (
        <div>
            <div style={{ textAlign: "center",
                          color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Modal Util</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Button onClick={() => setOpen(true)}>
                    Open</Button>
                <Modal open={open} onClose={() => setOpen(false)}>
                    <Box sx={style}>
                        <Typography variant="h4" component="h2">
                            GeeksforGeeks
                        </Typography>
                        <Typography sx={{ mt: 2 }}>
                            Welcome to GFG! World's no.1 platform for coding.
                        </Typography>
                        <Button sx={{ backgroundColor: 'white',
                                      mt: 2 }}>
                           Visit
                        </Button>
                    </Box>
                </Modal>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI nested Modal util with transitions. In the given example, there are two models used that are known as nested modals. Along with this, the open/close state of the modal is also animated with a transition component.

Javascript

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Backdrop from '@mui/material/Backdrop';
import Modal from "@mui/material/Modal";
import { Fade } from "@mui/material";

const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -60%)",
    width: 300,
    bgcolor: "blue",
    color: "white",
    px: 12,
    py: 8,
    borderRadius: 3
};

function App() {
    const [open, setOpen] = useState(false);

    return (
        <div>
            <div style={{ textAlign: "center",
                           color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Modal Util</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Button onClick={() => setOpen(true)}>
                    Open</Button>
                <Modal open={open} onClose={() => setOpen(false)}
                    closeAfterTransition
                    BackdropComponent={Backdrop}
                    BackdropProps={{
                        timeout: 1000,
                    }}>
                    <Fade in={open}>
                        <Box sx={style}>
                            <Typography variant="h3">
                                GeeksforGeeks
                            </Typography>
                            <Typography sx={{ mt: 2 }}>
                                This modal is using transition
                                animation in opening and
                                closing of modal.
                            </Typography>
                        </Box>
                    </Fade>
                </Modal>
            </div>
        </div>
    );
}

export default App;

Output: 

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