@zohodesk/hooks/es/utils/useResizeObserver.js

Unified Component Library - Hooks

import { useEffect } from 'react';
let observerCallbacks = null;
let resizeObserver = null;

function handleObserver(entries) {
  entries.map((entry, i) => {
    let oldCallbacks = observerCallbacks.get(entry.target);
    oldCallbacks.length && oldCallbacks.forEach(callback => {
      callback && callback(entry);
    });
  });
}

function addObserver(element, callback, options) {
  if (resizeObserver === null && observerCallbacks === null) {
    resizeObserver = new ResizeObserver(entries => {
      handleObserver(entries);
    });
    observerCallbacks = new Map();
  }

  resizeObserver.observe(element, options);
  let oldCallbacks = observerCallbacks.get(element) || [];
  observerCallbacks.set(element, [...oldCallbacks, callback]);
}

function removeObserver(element, callback) {
  let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
  oldCallbacks = oldCallbacks.filter(handler => handler !== callback);

  if (resizeObserver && oldCallbacks.length === 0) {
    observerCallbacks.delete(element);
    resizeObserver.unobserve(element);
  }

  if (resizeObserver && observerCallbacks && observerCallbacks.size === 0) {
    resizeObserver.disconnect();
    resizeObserver = null;
    observerCallbacks = null;
  }
}

export default function useResizeObserver(_ref) {
  let {
    getElement,
    callback,
    options,
    isObserve
  } = _ref;
  useEffect(() => {
    const element = getElement();

    if (!element || !isObserve) {
      return;
    }

    if (isObserve) {
      addObserver(element, callback, options);
    }

    return () => removeObserver(element, callback);
  }, [isObserve]);
}