@jyoketsu/click-outside-react/dist/click-outside-react.esm.js

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

import React, { useState, useRef, useEffect } from '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 = useState(false),
      isTouch = _useState[0],
      setisTouch = _useState[1];

  var containerRef = 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);
  }

  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.createElement("div", {
    ref: containerRef,
    style: _extends({}, {
      width: 'fit-content'
    }, propsStyle)
  }, children);
}

export { ClickOutside };
//# sourceMappingURL=click-outside-react.esm.js.map