yarn add react-click-away-listener
- It's quite small in size.
- It's built with TypeScript.
- It supports both Mouse and Touch Events.
- It works with Portals (>= v2).
import ClickAwayListener from 'react-click-away-listener';
const App = () => {
const handleClickAway = () => {
console.log('Maybe close the popup');
};
return (
<div id="app">
<ClickAwayListener onClickAway={handleClickAway}>
<div> Triggers whenever a click event is registered outside this div element </div>
</ClickAwayListener>
</div>
);
};
Caveats:
- Ensure the ClickAway component has just one child else
React.only
will throw an error. - It doesn't work with Text nodes.
Name | Type | Default | Description |
---|---|---|---|
onClickAway | (event) => void | Fires when a user clicks outside the click away component | |
mouseEvent | 'click' | 'mousedown' | 'mouseup' |
'click' | The mouse event type that gets fired on ClickAway |
touchEvent | 'touchstart' | 'touchend' |
'touchend' | The touch event type that gets fired on ClickAway |
MIT