React MUI Popover 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 Popover Util. A Popover is used to display some content on top of another component.

React MUI Popover:

• Basic Popover: It is the default popover variant util.
• Anchor Playground: In this, we can adjust anchorOrigin, transformOrigin positions, anchorReference, anchorPosition, and anchorEl.
• Mouse over interaction: It is used to add a hover event on popover.
• Complementary projects: The advanced projects can be achieved with the popover util.
• PopupState helper: This takes care of the popover state in various scenarios.
• API: There are 2 APIs used in this component.
  • <Grow />
  • <Popover />

Syntax:

<Button>
    Open
</Button>
<Popover>
    <Typography>Your content.</Typography>
</Popover>

Creating React Project:

Step 1: To create a react app, you need to install react modules through 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 usage of React MUI of the Popover component. Here, the popover is aligned using the two props: anchorOrigin and transformOrigin which are used to set the position of the popover. 

Javascript

import React, { useState } from "react";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import { Box, Button } from "@mui/material";

function App() {
    const [containerEl, setContainerEl] = useState(null);

    const handleOpen = (e) => {
        setContainerEl(e.currentTarget);
    };

    const handleClose = () => {
        setContainerEl(null);
    };

    const open = Boolean(containerEl);
    const id = open ? "simple-popover" : undefined;

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Popover Util</h2>
            </div>
            <center>
                <Button aria-describedby={id}
                    onClick={handleOpen}>
                    Open
                </Button>
                <Popover
                    id={id}
                    open={open}
                    anchorEl={containerEl}
                    onClose={handleClose}
                    anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "left",
                    }}
                    transformOrigin={{
                        vertical: "top",
                        horizontal: "right",
                    }}
                >
                    <Box sx={{ backgroundColor: "green",
                         color: "white" }}>
                        <Typography sx={{ p: 2 }}>
                             Welcome to GeeksforGeeks
                        </Typography>
                    </Box>
                </Popover>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI mouse over the interaction of a popover component. Here, we saw how to use the Popover component and the mouseover event to achieve popover behavior.

Javascript

import React, { useState } from "react";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import { Box } from "@mui/system";

function App() {
    const [containerEl, setContainerEl] = useState(null);

    const handleOpen = (e) => {
        setContainerEl(e.currentTarget);
    };

    const handleClose = () => {
        setContainerEl(null);
    };

    const open = Boolean(containerEl);

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Popover Util</h2>
            </div>

            <div>
                <Typography
                    onMouseEnter={handleOpen}
                    onMouseLeave={handleClose}
                    sx={{ textAlign: "center" }}
                >
                    Hover
                </Typography>
                <Popover
                    sx={{
                        pointerEvents: "none",
                    }}
                    open={open}
                    anchorEl={containerEl}
                    anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "center",
                    }}
                    transformOrigin={{
                        vertical: "top",
                        horizontal: "right",
                    }}
                    onClose={handleClose}
                    disableRestoreFocus
                >
                    <Box sx={{ backgroundColor: 'green', color: 'white' }}>
                        <Typography sx={{ p: 6 }}>
                            You just hovered!
                        </Typography>
                    </Box>
                </Popover>
            </div>
        </div>
    );
}

export default App;

Output:

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