ClickAwayListener API

API reference docs for the React ClickAwayListener component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import ClickAwayListener from '@mui/material/ClickAwayListener';
// or
import { ClickAwayListener } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

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. This 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' \| 'onPointerDown' \| 'onPointerUp' \| 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.