use-element-on-screen
Version:
`use-element-on-screen` is a React hook that tracks the visibility of an element within the viewport. It uses the Intersection Observer API to detect when an element enters or leaves the screen, enabling you to trigger animations, lazy loading, or other a
51 lines (50 loc) • 1.75 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/useIntersectionObserver.ts
var useIntersectionObserver_exports = {};
__export(useIntersectionObserver_exports, {
useIntersectionObserver: () => useIntersectionObserver
});
module.exports = __toCommonJS(useIntersectionObserver_exports);
var import_react = require("react");
var useIntersectionObserver = (callback, options = {
rootMargin: "-20% 0% -75%",
threshold: 0
}) => {
const ref = (0, import_react.useRef)(null);
(0, import_react.useEffect)(() => {
const observer = new IntersectionObserver((entries) => {
callback(entries);
}, options);
if (ref.current) {
observer.observe(ref.current);
}
return () => {
if (ref.current) {
observer.unobserve(ref.current);
}
};
}, [callback, options]);
return ref;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useIntersectionObserver
});
//# sourceMappingURL=useIntersectionObserver.js.map
;