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

Observe resizing and click outside for react components

import { useState, useEffect } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

const observeResize = (observableRef, callback) => {
  const [size, setSize] = useState({
    width: 0,
    height: 0
  });
  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) => {
  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]);
};

export { observeClickOutside, observeResize };