@asyarb/use-intersection-observer/dist/use-intersection-observer.esm.js

An easy to use React hook wrapper around the IntersectionObserver API.

import { useState, useEffect } from 'react';

var IS_BROWSER = typeof window !== 'undefined';
/**
 * Watch for the scrolling intersection of a React component or
 * Element.
 *
 * @param hookProperties - Configuration object for this hook.
 *
 * @returns A boolean representing if the observed component
 * or Element is in view.
 */

var useIntersectionObserver = function useIntersectionObserver(_ref) {
  var ref = _ref.ref,
      element = _ref.element,
      _ref$options = _ref.options,
      options = _ref$options === void 0 ? {
    triggerOnce: true,
    threshold: 0
  } : _ref$options,
      callback = _ref.callback;

  var _useState = useState(false),
      inView = _useState[0],
      setInView = _useState[1];

  var handleIntersect = function handleIntersect(entries) {
    if (!intersectObs) return;
    var entry = entries[0];
    if (callback && entry.isIntersecting) callback(entry);
    if (options.triggerOnce && entry.isIntersecting) intersectObs.disconnect();
    setInView(entry.isIntersecting);
  };

  var _useState2 = useState(function () {
    return IS_BROWSER ? new IntersectionObserver(handleIntersect, options) : undefined;
  }),
      intersectObs = _useState2[0];

  useEffect(function () {
    if (!intersectObs) return;
    var domNode;
    if (ref) domNode = ref.current;else if (element) domNode = element;
    if (domNode) intersectObs.observe(domNode);
    return function () {
      return intersectObs.disconnect();
    };
  }, [ref, intersectObs, element]);
  return inView;
};

export { useIntersectionObserver };
//# sourceMappingURL=use-intersection-observer.esm.js.map