@jyoketsu/click-outside-react/dist/click-outside-react.cjs.development.js

```bash yarn add @jyoketsu/click-outside-react ```

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function ClickOutside(_ref) {
  var style = _ref.style,
      onClickOutside = _ref.onClickOutside,
      children = _ref.children;

  var _useState = React.useState(false),
      isTouch = _useState[0],
      setisTouch = _useState[1];

  var containerRef = React.useRef(null);

  function handle(e) {
    if (e.type === 'touchend') setisTouch(true);
    if (e.type === 'click' && isTouch) return;
    var el = containerRef.current;
    if (el && !el.contains(e.target)) onClickOutside(e);
  }

  React.useEffect(function () {
    document.addEventListener('touchend', handle, true);
    document.addEventListener('click', handle, true);
    document.addEventListener('contextmenu', handle, true);
    return function () {
      document.removeEventListener('touchend', handle, true);
      document.removeEventListener('click', handle, true);
      document.removeEventListener('contextmenu', handle, true);
    };
  }, []);
  var propsStyle = style || {};
  return React__default.createElement("div", {
    ref: containerRef,
    style: _extends({}, {
      width: 'fit-content'
    }, propsStyle)
  }, children);
}

exports.ClickOutside = ClickOutside;
//# sourceMappingURL=click-outside-react.cjs.development.js.map