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

Unified Component Library - Hooks

import { useEffect } from 'react'; // This hook is used for the IntersectionObserver with same options for the set of elements.

let observerCallbacks = null;
let intersectionObserver = 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 (intersectionObserver === null && observerCallbacks === null) {
    intersectionObserver = new IntersectionObserver(entries => {
      handleObserver(entries);
    }, options);
    observerCallbacks = new Map();
  }

  intersectionObserver.observe(element);
  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 (intersectionObserver && oldCallbacks.length === 0) {
    observerCallbacks.delete(element);
    intersectionObserver.unobserve(element);
  }

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

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

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

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

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