Skip to content

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.
⚠️ Needs to be able to hold a ref.
mouseEvent enum: 'onClick' |
 'onMouseDown' |
 'onMouseUp' |
 false
'onClick' 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.

The component cannot hold a ref.

Notes

The component can cause issues in StrictMode.

Demos