ClickAwayListener

ClickAwayListener

The API documentation of the ClickAwayListener React component.

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