ClickAwayListener API
The API documentation of the ClickAwayListener React component. Learn more about the props and the CSS customization points.
Import
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
// or
import { ClickAwayListener } from '@material-ui/core';You can learn more about the difference by reading this guide.
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. |
|
| disableReactTree | bool | false | If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled. |
| mouseEvent | '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 | 'onTouchEnd' | 'onTouchStart' | false |
'onTouchEnd' | The touch event to listen to. You can disable the listener by providing false. |
The component cannot hold a ref.