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

Unified Component Library - Hooks

import { useEffect, useMemo } from 'react';
/* function buildThresholdList() {
  let thresholds = [];
  const numSteps = 100;

  for (let i = 1.0; i <= numSteps; i++) {
    let ratio = i / numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
} */

export default function useIntersectionObserver(_ref) {
  let {
    getElement,
    callback,
    isObserve,
    options = {}
  } = _ref;
  const {
    isStartIntersecting = false
  } = options;
  const optionsData = useMemo(() => ({
    threshold: isStartIntersecting ? 0.9 : 0
  }), [isStartIntersecting]);
  useEffect(() => {
    const element = getElement();

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

    const insObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        callback(element, entry);
      });
    }, optionsData);
    insObserver.observe(element);
    return () => {
      insObserver.unobserve(element);
      insObserver.disconnect();
    };
  }, [isObserve, optionsData]);
}