A React component for dealing with clicks outside its subtree
npm install react-outside-click-handler-liteA React component for handling outside clicks.
> NOTE: This library is a fork of the excellent airbnb/react-outside-click-handler, and the source of this fork is nearly identical, except for one difference: this library does not use a Object.values polyfill, so its bundle size is reduced by nearly 75% (14.3kb to 3.7kb after gzip).
``jsx
import OutsideClickHandler from 'react-outside-click-handler-lite';
function MyComponent() {
return (
alert('You clicked outside of this component!!!');
}}
>
Hello World
);
}
`
Since the OutsideClickHandler specifically handles clicks outside a specific subtree, children is expected to be defined. A consumer should also not render the OutsideClickHandler in the case that children are not defined.
Note that if you use a Portal (native or react-portal) of any sort in the children, the OutsideClickHandler will not behave as expected.
The onOutsideClick prop is also required as without it, the OutsideClickHandler is basically a heavy-weight
. It takes the relevant clickevent as an arg and gets triggered when the user clicks anywhere outside of the subtree generated by the DOM node.$3
If the
disabled prop is true, outside clicks will not be registered. This can be utilized to temporarily disable interaction without unmounting/remounting the entire tree.$3
See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture for more information on event bubbling vs. capture.
If
useCapture is true, the event will be registered in the capturing phase and thus, propagated top-down instead of bottom-up as is the default.$3
By default, the
OutsideClickHandler renders a display: block to wrap the subtree defined by children. If desired, the display can be set to inline-block, inline, flex, or contents instead. There is no way not to render a wrapping `.