Aww yeah, Material-UI v4 is here!
ClickAwayListener

ClickAwayListener API

The API documentation of the ClickAwayListener React component. Learn more about the properties and the CSS customization points.

import ClickAwayListener from '@material-ui/core/ClickAwayListener';

Listen for click events that occur somewhere in the document, outside of the element itself. For instance, if you need to hide a menu when people click anywhere else on your page.

Props

Name Type Default Description
children * element The wrapped element.
mouseEvent enum: 'onClick' |
 'onMouseDown' |
 'onMouseUp' |
 false
'onMouseUp' The mouse event to listen to. You can disable the listener by providing false.
onClickAway * func Callback fired when a "click away" event is detected.
touchEvent enum: 'onTouchStart' |
 'onTouchEnd' |
 false
'onTouchEnd' The touch event to listen to. You can disable the listener by providing false.

Any other properties supplied will be spread to the root element (EventListener).

Inheritance

The properties of the EventListener component, from react-event-listener, are also available. You can take advantage of this behavior to target nested components.

Demos