How to Create Modal Popup using Material UI in React Application

In this article, we will learn how to create a modal popup in  React application using Material UI.

Prerequisites of React

• Familiarity with the HTML, JavaScript.
• node.js installed

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'Modalpopup.js'. We will create a simple modal popup using material UI. Import the following component from Material UI in the Modalpopup.js file.

import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

 Now, add the following code in the Modalpopup.js file.

import 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: 600,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
};
function Modalpopup() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    return (
        <div>
            <Button onClick={handleOpen}>Open modal</Button>
            <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">
                        Material UI Modal Popup
                    </Typography>
                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                        Hello,
                        How to Create Modal Popup using Material UI in React Application
                    </Typography>
                </Box>
            </Modal>
        </div>
    )
}

export default Modalpopup

In the above code, we have two functions for open and close popups named handleopen and handleclose, On button click. We call the handleopen function, and the modal popup opens by clicking the button.

Now, import the modalpopup component in the src/App.js file.

import logo from './logo.svg';
import './App.css';
import Modalpopup from './Modalpopup'
function App() {
  return (
    <div className="App">
      <Modalpopup />
    </div>
  );
}

export default App;

Now, run the project using the 'npm start' command and check the result.

Now click on the open modal button.

Summary

This article provides a step-by-step guide on how to create a Modal popup in a React application using the Material UI library.