react-sign/dist/react-sign.esm.js

Easy load more in react. Is my component on user's viewport?!

import React, { useRef, useMemo, useEffect } from 'react';

var ReactSign = function ReactSign(_ref) {
  var onEnter = _ref.onEnter,
      onLeave = _ref.onLeave,
      children = _ref.children,
      _ref$threshold = _ref.threshold,
      threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
      _ref$rootMargin = _ref.rootMargin,
      rootMargin = _ref$rootMargin === void 0 ? '0px' : _ref$rootMargin;
  var isInitializeToggle = useRef(true);
  var wrapperRef = useRef(null);
  var observerRef = useRef();
  var rootMarginStringValue = useMemo(function () {
    return typeof rootMargin === 'number' ? rootMargin + "px" : rootMargin;
  }, [rootMargin]);

  var handleIntersect = function handleIntersect(entries // observer: IntersectionObserver
  ) {
    if (entries[0].isIntersecting) {
      onEnter && onEnter();
    } else {
      onLeave && !isInitializeToggle.current && onLeave();
    }

    if (isInitializeToggle.current) {
      isInitializeToggle.current = false;
    }
  };

  useEffect(function () {
    if (wrapperRef.current) {
      var options = {
        root: null,
        rootMarginStringValue: rootMarginStringValue,
        threshold: threshold
      };
      observerRef.current = new IntersectionObserver(handleIntersect, options);
      observerRef.current.observe(wrapperRef.current);
    }

    return function () {
      var _observerRef$current;

      if (wrapperRef.current) (_observerRef$current = observerRef.current) == null ? void 0 : _observerRef$current.unobserve(wrapperRef.current);
    };
  }, []);
  return React.createElement("div", {
    ref: wrapperRef
  }, children);
};

export default ReactSign;
export { ReactSign };
//# sourceMappingURL=react-sign.esm.js.map