ClickAwayListener API
API documentation for the React ClickAwayListener component. Learn about the available props, and the CSS API.
Import
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
// or
import { ClickAwayListener } from '@material-ui/core';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. | |
| onClickAway* | func | Callback fired when a "click away" event is detected. | |
| 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. |
| 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.