Takes care of the boilerplate for common Menu, Popover and Popper use cases.
Provides a Custom React Hook that keeps track of the local state for a single popup, and functions to connect trigger, toggle, and popover/menu/popper components to the state.
Also provides a Render Props Component that keeps track of the local state for a single popup, and passes the state and mutation functions to a child render function.
Requires MUI >= 5.0.0 and React >= 16.8.0.
For MUI v4 you'll need material-ui-popup-state@^1.9.3.
- material-ui-popup-state
- Requirements
- Table of Contents
- Installation
- Examples with React Hooks
- React Hooks API
- Examples with Render Props
- Render Props API
- Using
PopoverandMenuwithbindHover - Chaining event handlers
npm install --save material-ui-popup-stateimport * as React from 'react'
import Button from '@mui/material/Button'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import {
usePopupState,
bindTrigger,
bindMenu,
} from 'material-ui-popup-state/hooks'
const MenuPopupState = () => {
const popupState = usePopupState({ variant: 'popover', popupId: 'demoMenu' })
return (
<div>
<Button variant="contained" {...bindTrigger(popupState)}>
Open Menu
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Cake</MenuItem>
<MenuItem onClick={popupState.close}>Death</MenuItem>
</Menu>
</div>
)
}
export default MenuPopupStateimport React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Popover from '@mui/material/Popover'
import {
usePopupState,
bindTrigger,
bindPopover,
} from 'material-ui-popup-state/hooks'
const styles = (theme) => ({
typography: {
margin: theme.spacing.unit * 2,
},
})
const PopoverPopupState = ({ classes }) => {
const popupState = usePopupState({
variant: 'popover',
popupId: 'demoPopover',
})
return (
<div>
<Button variant="contained" {...bindTrigger(popupState)}>
Open Popover
</Button>
<Popover
{...bindPopover(popupState)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
</div>
)
}
PopoverPopupState.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(PopoverPopupState)import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Popper from '@mui/material/Popper'
import {
usePopupState,
bindToggle,
bindPopper,
} from 'material-ui-popup-state/hooks'
import Fade from '@mui/material/Fade'
import Paper from '@mui/material/Paper'
const styles = (theme) => ({
typography: {
padding: theme.spacing.unit * 2,
},
})
const PopperPopupState = ({ classes }) => {
const popupState = usePopupState({ variant: 'popper', popupId: 'demoPopper' })
return (
<div>
<Button variant="contained" {...bindToggle(popupState)}>
Toggle Popper
</Button>
<Popper {...bindPopper(popupState)} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper>
<Typography className={classes.typography}>
The content of the Popper.
</Typography>
</Paper>
</Fade>
)}
</Popper>
</div>
)
}
PopperPopupState.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(PopperPopupState)material-ui-popup-state/hooks exports several helper functions you can use to
connect components easily:
anchorRef: creates areffunction to pass to theanchorEl(by default, thecurrentTargetof the mouse event that triggered the popup is used; only useanchorRefif you want a different element to be the anchor).bindMenu: creates props to control aMenucomponent.bindPopover: creates props to control aPopovercomponent.bindPopper: creates props to control aPoppercomponent.bindDialog: creates props to control aDialogcomponent.bindTrigger: creates props for a component that opens the popup when clicked.bindContextMenu: creates props for a component that opens the popup on when right clicked (contextmenuevent). NOTE:bindPopover/bindMenuwill position the Popover/Menu to thecontextmenuevent location. To position using thecontextmenutarget element instead, passanchorReference="anchorEl"after{...bindPopover(popupState)}/{...bindMenu(popupState)}.bindToggle: creates props for a component that toggles the popup when clicked.bindHover: creates props for a component that opens the popup while hovered. NOTE: See this guidance if you are usingbindHoverwithPopoverorMenu.bindFocus: creates props for a component that opens the popup while focus.bindDoubleClick: creates props for a component that opens the popup while double click.
To use one of these functions, you should call it with the object
returned by usePopupState and spread the return value into the desired
element:
import * as React from 'react'
import Button from '@mui/material/Button'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import {
usePopupState,
bindTrigger,
bindMenu,
} from 'material-ui-popup-state/hooks'
const MenuPopupState = () => {
const popupState = usePopupState({ variant: 'popover', popupId: 'demoMenu' })
return (
<div>
<Button variant="contained" {...bindTrigger(popupState)}>
Open Menu
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Cake</MenuItem>
<MenuItem onClick={popupState.close}>Death</MenuItem>
</Menu>
</div>
)
}
export default MenuPopupStateThis is a Custom Hook that uses useState internally, therefore the Rules of Hooks apply to usePopupState.
Use 'popover' if your popup is a Popover or Menu; use 'popper' if your
popup is a Popper.
Right now this only affects whether bindTrigger/bindToggle/bindHover return
an aria-controls prop or an aria-describedby prop.
The id for the popup component. It will be passed to the child props so that
the trigger component may declare the same id in an ARIA prop.
If true, will not steal focus when the popup is opened. (And bindPopover/bindMenu) will inject disableAutoFocus, disableEnforceFocus, and disableRestoreFocus).
Defaults to true when the popup is opened by the bindHover or bindFocus element.
An object with the following properties:
open([eventOrAnchorEl]): opens the popup. You must pass in an anchor element or an event with acurrentTarget, otherwise the popup will not position properly and you will get a warning; MUI needs an anchor element to position the popup.close(): closes the popuptoggle([eventOrAnchorEl]): opens the popup if it is closed, or closes the popup if it is open. If the popup is currently closed, you must pass an anchor element or an event with acurrentTarget, otherwise the popup will not position properly and you will get a warning; MUI needs an anchor element to position the popup.setOpen(open, [eventOrAnchorEl]): sets whether the popup is open. Ifopenis truthy, you must pass in an anchor element or an event with acurrentTarget, otherwise the popup will not position properly and you will get a warning; MUI needs an anchor element to position the popup.isOpen:true/falseif the popup is open/closedanchorEl: the current anchor elementanchorPosition: the current anchor positionsetAnchorEl: sets the anchor element (thecurrentTargetof the triggering mouse event is used by default unless you have calledsetAnchorEl)popupId: thepopupIdprop you passed toPopupStatevariant: thevariantprop you passed toPopupState
import * as React from 'react'
import Button from '@mui/material/Button'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
const MenuPopupState = () => (
<PopupState variant="popover" popupId="demoMenu">
{(popupState) => (
<React.Fragment>
<Button variant="contained" {...bindTrigger(popupState)}>
Open Menu
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Cake</MenuItem>
<MenuItem onClick={popupState.close}>Death</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState>
)
export default MenuPopupStateimport React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Popover from '@mui/material/Popover'
import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'
const styles = (theme) => ({
typography: {
margin: theme.spacing.unit * 2,
},
})
const PopoverPopupState = ({ classes }) => (
<PopupState variant="popover" popupId="demoPopover">
{(popupState) => (
<div>
<Button variant="contained" {...bindTrigger(popupState)}>
Open Popover
</Button>
<Popover
{...bindPopover(popupState)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
</div>
)}
</PopupState>
)
PopoverPopupState.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(PopoverPopupState)import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import HoverPopover from 'material-ui-popup-state/HoverPopover'
import PopupState, { bindHover, bindPopover } from 'material-ui-popup-state'
const styles = (theme) => ({
popover: {
pointerEvents: 'none',
},
paper: {
padding: theme.spacing.unit,
},
})
const HoverPopoverPopupState = ({ classes }) => (
<PopupState variant="popover" popupId="demoPopover">
{(popupState) => (
<div>
<Typography {...bindHover(popupState)}>
Hover with a Popover.
</Typography>
<HoverPopover
{...bindPopover(popupState)}
className={classes.popover}
classes={{
paper: classes.paper,
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography>The content of the Popover.</Typography>
</HoverPopover>
</div>
)}
</PopupState>
)
HoverPopoverPopupState.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(HoverPopoverPopupState)import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Popper from '@mui/material/Popper'
import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state'
import Fade from '@mui/material/Fade'
import Paper from '@mui/material/Paper'
const styles = (theme) => ({
typography: {
padding: theme.spacing.unit * 2,
},
})
const PopperPopupState = ({ classes }) => (
<PopupState variant="popper" popupId="demoPopper">
{(popupState) => (
<div>
<Button variant="contained" {...bindToggle(popupState)}>
Toggle Popper
</Button>
<Popper {...bindPopper(popupState)} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper>
<Typography className={classes.typography}>
The content of the Popper.
</Typography>
</Paper>
</Fade>
)}
</Popper>
</div>
)}
</PopupState>
)
PopperPopupState.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(PopperPopupState)material-ui-popup-state exports several helper functions you can use to
connect components easily:
anchorRef: creates areffunction to pass to theanchorEl(by default, thecurrentTargetof the mouse event that triggered the popup is used; only useanchorRefif you want a different element to be the anchor).bindMenu: creates props to control aMenucomponent.bindPopover: creates props to control aPopovercomponent.bindPopper: creates props to control aPoppercomponent.bindDialog: creates props to control aDialogcomponent.bindTrigger: creates props for a component that opens the popup when clicked.bindContextMenu: creates props for a component that opens the popup on when right clicked (contextmenuevent). NOTE:bindPopover/bindMenuwill position the Popover/Menu to thecontextmenuevent location. To position using thecontextmenutarget element instead, passanchorReference="anchorEl"after{...bindPopover(popupState)}/{...bindMenu(popupState)}.bindToggle: creates props for a component that toggles the popup when clicked.bindHover: creates props for a component that opens the popup while hovered. NOTE: See this guidance if you are usingbindHoverwithPopoverorMenu.bindFocus: creates props for a component that opens the popup while hovered.
To use one of these functions, you should call it with the props PopupState
passed to your child function, and spread the return value into the desired
element:
import * as React from 'react'
import Button from '@mui/material/Button'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
const MenuPopupState = () => (
<PopupState variant="popover" popupId="demoMenu">
{(popupState) => (
<React.Fragment>
<Button variant="contained" {...bindTrigger(popupState)}>
Open Menu
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Cake</MenuItem>
<MenuItem onClick={popupState.close}>Death</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState>
)
export default MenuPopupStateUse 'popover' if your popup is a Popover or Menu; use 'popper' if your
popup is a Popper.
Right now this only affects whether bindTrigger/bindToggle/bindHover return
an aria-controls prop or an aria-describedby prop.
The id for the popup component. It will be passed to the child props so that
the trigger component may declare the same id in an ARIA prop.
If true, will not steal focus when the popup is opened. (And bindPopover/bindMenu) will inject disableAutoFocus, disableEnforceFocus, and disableRestoreFocus).
Defaults to true when the popup is opened by the bindHover or bindFocus element.
The render function. It will be called with an object containing the following
props (exported as the InjectedProps type):
open([eventOrAnchorEl]): opens the popupclose(): closes the popuptoggle([eventOrAnchorEl]): opens the popup if it is closed, or closes the popup if it is open.setOpen(open, [eventOrAnchorEl]): sets whether the popup is open.isOpen:true/falseif the popup is open/closedanchorEl: the current anchor elementanchorPosition: the current anchor positionsetAnchorEl: sets the anchor element (thecurrentTargetof the triggering mouse event is used by default unless you have calledsetAnchorEl)popupId: thepopupIdprop you passed toPopupStatevariant: thevariantprop you passed toPopupState
MUI's Modal (used by Popover and Menu) blocks pointer events to all other components, interfering with bindHover
(the popover or menu will open when the mouse enters the bindHover element, but won't close when the mouse leaves). You can
use the following components to work around this:
import HoverMenu from 'material-ui-popup-state/HoverMenu'
import HoverPopover from 'material-ui-popup-state/HoverPopover'These are just wrapper components that pass inline styles to prevent Modal from blocking pointer events.
What if you need to perform additional actions in onClick, but it's being injected by {...bindTrigger(popupState)} etc?
There are two options:
This is the most straightforward, explicit option.
const button = (
<Button
{...bindTrigger(popupState)}
onClick={(e: React.MouseEvent) => {
bindTrigger(popupState).onClick(e)
performCustomAction(e)
}}
>
Open Menu
</Button>
)If you don't like the above option, you can use the provided material-ui-popup-state/chainEventHandlers helper:
import { chainEventHandlers } from 'material-ui-popup-state/chainEventHandlers'
const button = (
<Button
{...chainEventHandlers(bindTrigger(popupState), {
onClick: (e: React.MouseEvent) => {
bindTrigger(popupState).onClick(e)
performCustomAction(e)
},
})}
>
Open Menu
</Button>
)chainEventHandlers accepts a variable number of props arguments and combines any function props of the same name
into a function that invokes the chained functions in sequence. For all other properties the behavior is like
Object.assign.
Warning
chainEventHandlers doesn't memoize the combined event handler functions, so they will cause components to
rerender. If you need memoized functions, you will need to perform the memoization with your own code, for example
using React.useCallback and chaining event handlers manually.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent