Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

useIntersectionObserver.js 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = useIntersectionObserver;
  4. var _react = require("react");
  5. var _useStableMemo = _interopRequireDefault(require("./useStableMemo"));
  6. var _useIsomorphicEffect = _interopRequireDefault(require("./useIsomorphicEffect"));
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  8. /**
  9. * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
  10. * a DOM Element.
  11. *
  12. * @param element The DOM element to observe
  13. * @param init IntersectionObserver options
  14. */
  15. function useIntersectionObserver(element, _temp) {
  16. var _ref = _temp === void 0 ? {} : _temp,
  17. threshold = _ref.threshold,
  18. root = _ref.root,
  19. rootMargin = _ref.rootMargin;
  20. var _useState = (0, _react.useState)(null),
  21. entries = _useState[0],
  22. setEntry = _useState[1];
  23. var observer = (0, _useStableMemo.default)(function () {
  24. return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(function (entries) {
  25. return setEntry(entries);
  26. }, {
  27. threshold: threshold,
  28. root: root,
  29. rootMargin: rootMargin
  30. });
  31. }, [root, rootMargin, threshold && JSON.stringify(threshold)]);
  32. (0, _useIsomorphicEffect.default)(function () {
  33. if (!element || !observer) return;
  34. observer.observe(element);
  35. return function () {
  36. observer.unobserve(element);
  37. };
  38. }, [observer, element]);
  39. return entries || [];
  40. }