@vergiss/chooks/lib/hooks/useInView/index.js

React hooks library

"use strict";

import "core-js/modules/es.object.define-property";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useInView = void 0;

var react_1 = require("react");

require("intersection-observer");

function isInView(target) {
  if (!target) {
    return false;
  }

  var viewPortWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  var rect = target.getBoundingClientRect();

  if (rect) {
    var top_1 = rect.top,
        bottom = rect.bottom,
        left = rect.left,
        right = rect.right;
    return bottom > 0 && top_1 <= viewPortHeight && left <= viewPortWidth && right > 0;
  }

  return false;
}

function useInView(target) {
  var _a = react_1.useState(function () {
    var element = target.current;
    return isInView(element);
  }),
      inView = _a[0],
      setInView = _a[1];

  react_1.useEffect(function () {
    var element = target.current;

    if (!element) {
      return function () {};
    }

    try {
      var observer_1 = new IntersectionObserver(function (entries) {
        console.log('entries:', entries);

        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
          var entry = entries_1[_i];

          if (entry.isIntersecting) {
            setInView(true);
          } else {
            setInView(false);
          }
        }
      });
      observer_1.observe(element);
      return function () {
        observer_1.disconnect();
      };
    } catch (e) {
      console.error('Your browser doesn\'t support IntersectionObserver');
    }
  }, [target]);
  return inView;
}

exports.useInView = useInView;