Neighbourhood Party Manager

    @kimmel/react-outside-click-handler

    2.0.0 • Public • Published

    react-outside-click-handler

    A React component for handling outside clicks

    Usage

    import OutsideClickHandler from "react-outside-click-handler";
    
    function MyComponent() {
      return (
        <OutsideClickHandler
          onOutsideClick={() => {
            alert("You clicked outside of this component!!!");
          }}
        >
          Hello World
        </OutsideClickHandler>
      );
    }

    For full browser support, react-outside-click-handler expects its consumer to include airbnb-browser-shims or another similar shim. This is specifically due to the use of the node.contains method.

    Props

    children: PropTypes.node.isRequired

    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.

    onOutsideClick: PropTypes.func.isRequired

    The onOutsideClick prop is also required as without it, the OutsideClickHandler is basically a heavy-weight <div />. 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.

    disabled: PropTypes.bool

    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.

    useCapture: PropTypes.bool

    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.

    Keywords

    none

    Install

    npm i @kimmel/react-outside-click-handler

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    28.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • jacobhaug
    • zackify
    • ryanar