vue-hooks-plus/lib/useInViewport/index.js

Vue hooks library

"use strict";
const vue = require("vue");
const domTarget = require("../utils/domTarget");
const useEffectWithTarget = require("../utils/useEffectWithTarget");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const useEffectWithTarget__default = /* @__PURE__ */ _interopDefaultLegacy(useEffectWithTarget);
function useInViewport(target, options) {
  const state = vue.ref();
  const ratio = vue.ref();
  useEffectWithTarget__default.default(
    () => {
      const el = domTarget.getTargetElement(target);
      if (!el) {
        return;
      }
      const observer = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            state.value = entry.isIntersecting;
            ratio.value = entry.intersectionRatio;
          }
        },
        {
          ...options,
          root: domTarget.getTargetElement(options == null ? void 0 : options.root)
        }
      );
      observer.observe(el);
      return () => {
        observer.disconnect();
      };
    },
    [],
    target
  );
  return [vue.readonly(state), vue.readonly(ratio)];
}
module.exports = useInViewport;