UNPKG

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
"use strict"; 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