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>neveropen</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 neveropen </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>neveropen</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/
