react-ref-observe/dist/observers.cjs.js

Observe resizing and click outside for react components

'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 ResizeObserver = _interopDefault(require('resize-observer-polyfill'));

const observeResize = (observableRef, callback) => {
  const [size, setSize] = React.useState({
    width: 0,
    height: 0
  });
  React.useEffect(() => {
    const element = observableRef.current;

    if (element == null) {
      throw new Error("Ref is undefined");
    }

    const resizeObserver = new ResizeObserver(entries => {
      if (entries.length !== 0) {
        const {
          contentRect
        } = entries[0];
        const currentSize = {
          width: contentRect.width,
          height: contentRect.height
        };
        setSize(currentSize);

        if (callback != null) {
          callback(currentSize);
        }
      }
    });
    resizeObserver.observe(element);
    return () => resizeObserver.unobserve(element);
  }, [observableRef]);
  return size;
};
const observeClickOutside = (observableRefs, callback) => {
  React.useEffect(() => {
    const handleClick = event => {
      const target = event.target;

      if (target instanceof Element) {
        const clickedOutside = observableRefs.every(ref => ref.current == null || !ref.current.contains(target));

        if (clickedOutside) {
          callback(event);
        }
      }
    };

    document.addEventListener("touchstart", handleClick);
    document.addEventListener("mousedown", handleClick);
    return () => {
      document.removeEventListener("touchstart", handleClick);
      document.removeEventListener("mousedown", handleClick);
    };
  }, [observableRefs]);
};

exports.observeClickOutside = observeClickOutside;
exports.observeResize = observeResize;