vue-laze/dist/esm/development/index.mjs

Lazily render components in React

// src/useLaze.tsx
import { readonly, ref, watchEffect } from "vue";
function useLaze(options) {
  const visible = ref(false);
  const container = ref(null);
  watchEffect((onCleanup) => {
    visible.value = false;
    let refresh = false;
    if (options && options.refresh) {
      refresh = typeof options.refresh === "boolean" ? options.refresh : options.refresh.value;
    }
    if (container.value) {
      const current = container.value;
      const observer = new IntersectionObserver((entries) => {
        for (const entry of entries) {
          if (refresh) {
            visible.value = entry.isIntersecting;
          } else if (entry.isIntersecting) {
            visible.value = true;
            observer.disconnect();
          }
        }
      });
      observer.observe(current);
      onCleanup(() => {
        observer.unobserve(current);
        observer.disconnect();
      });
    }
  });
  return {
    ref: container,
    visible: readonly(visible)
  };
}
export {
  useLaze as default
};
//# sourceMappingURL=index.mjs.map