@usefy/use-intersection-observer 0.0.1

package/dist/index.js

@@ -0,0 +1,235 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createInitialEntry: () => createInitialEntry,
+  isIntersectionObserverSupported: () => isIntersectionObserverSupported,
+  toIntersectionEntry: () => toIntersectionEntry,
+  useIntersectionObserver: () => useIntersectionObserver
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useIntersectionObserver.ts
+var import_react = require("react");
+
+// src/utils.ts
+function isIntersectionObserverSupported() {
+  return typeof window !== "undefined" && "IntersectionObserver" in window;
+}
+function toIntersectionEntry(nativeEntry) {
+  return {
+    entry: nativeEntry,
+    isIntersecting: nativeEntry.isIntersecting,
+    intersectionRatio: nativeEntry.intersectionRatio,
+    target: nativeEntry.target,
+    boundingClientRect: nativeEntry.boundingClientRect,
+    intersectionRect: nativeEntry.intersectionRect,
+    rootBounds: nativeEntry.rootBounds,
+    time: nativeEntry.time
+  };
+}
+function createInitialEntry(isIntersecting, target = null) {
+  if (!isIntersecting) {
+    return null;
+  }
+  const emptyRect = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    toJSON: () => ({})
+  };
+  const mockNativeEntry = {
+    target,
+    isIntersecting,
+    intersectionRatio: isIntersecting ? 1 : 0,
+    boundingClientRect: emptyRect,
+    intersectionRect: emptyRect,
+    rootBounds: null,
+    time: typeof performance !== "undefined" ? performance.now() : Date.now()
+  };
+  return {
+    entry: mockNativeEntry,
+    isIntersecting,
+    intersectionRatio: isIntersecting ? 1 : 0,
+    target,
+    boundingClientRect: emptyRect,
+    intersectionRect: emptyRect,
+    rootBounds: null,
+    time: mockNativeEntry.time
+  };
+}
+function createNoopRef() {
+  return () => {
+  };
+}
+
+// src/useIntersectionObserver.ts
+function useIntersectionObserver(options = {}) {
+  const {
+    threshold = 0,
+    root = null,
+    rootMargin = "0px",
+    triggerOnce = false,
+    enabled = true,
+    initialIsIntersecting = false,
+    onChange,
+    delay = 0
+  } = options;
+  const isSupported = isIntersectionObserverSupported();
+  const observerRef = (0, import_react.useRef)(null);
+  const targetRef = (0, import_react.useRef)(null);
+  const hasTriggeredRef = (0, import_react.useRef)(false);
+  const delayTimeoutRef = (0, import_react.useRef)(null);
+  const prevEntryRef = (0, import_react.useRef)(null);
+  const onChangeRef = (0, import_react.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const [, forceUpdate] = (0, import_react.useState)({});
+  const [entry, setEntry] = (0, import_react.useState)(
+    () => initialIsIntersecting ? createInitialEntry(true, null) : null
+  );
+  const inView = entry?.isIntersecting ?? initialIsIntersecting;
+  const handleIntersection = (0, import_react.useCallback)(
+    (entries) => {
+      entries.forEach((nativeEntry) => {
+        const intersectionEntry = toIntersectionEntry(nativeEntry);
+        const prevEntry = prevEntryRef.current;
+        const hasChanged = !prevEntry || prevEntry.isIntersecting !== nativeEntry.isIntersecting || prevEntry.intersectionRatio !== nativeEntry.intersectionRatio;
+        prevEntryRef.current = {
+          isIntersecting: nativeEntry.isIntersecting,
+          intersectionRatio: nativeEntry.intersectionRatio
+        };
+        if (hasChanged) {
+          setEntry(intersectionEntry);
+        }
+        if (onChangeRef.current) {
+          onChangeRef.current(intersectionEntry, nativeEntry.isIntersecting);
+        }
+        if (triggerOnce && nativeEntry.isIntersecting) {
+          hasTriggeredRef.current = true;
+          if (observerRef.current && nativeEntry.target) {
+            observerRef.current.unobserve(nativeEntry.target);
+          }
+        }
+      });
+    },
+    [triggerOnce]
+  );
+  const setRef = (0, import_react.useCallback)((node) => {
+    const prevTarget = targetRef.current;
+    targetRef.current = node;
+    if (prevTarget !== node) {
+      forceUpdate({});
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isSupported) {
+      return;
+    }
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!enabled) {
+      return;
+    }
+    if (triggerOnce && hasTriggeredRef.current) {
+      return;
+    }
+    if (!targetRef.current) {
+      return;
+    }
+    const target = targetRef.current;
+    const createAndObserve = () => {
+      observerRef.current = new IntersectionObserver(handleIntersection, {
+        threshold,
+        root,
+        rootMargin
+      });
+      if (target) {
+        observerRef.current.observe(target);
+      }
+    };
+    if (delay > 0) {
+      delayTimeoutRef.current = setTimeout(() => {
+        createAndObserve();
+        delayTimeoutRef.current = null;
+      }, delay);
+      return () => {
+        if (delayTimeoutRef.current) {
+          clearTimeout(delayTimeoutRef.current);
+          delayTimeoutRef.current = null;
+        }
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+      };
+    }
+    createAndObserve();
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [
+    enabled,
+    triggerOnce,
+    delay,
+    threshold,
+    root,
+    rootMargin,
+    handleIntersection,
+    isSupported,
+    // Include target change trigger
+    targetRef.current
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!triggerOnce) {
+      hasTriggeredRef.current = false;
+    }
+  }, [triggerOnce]);
+  if (!isSupported) {
+    return {
+      entry: initialIsIntersecting ? createInitialEntry(true, null) : null,
+      inView: initialIsIntersecting,
+      ref: createNoopRef()
+    };
+  }
+  return {
+    entry,
+    inView,
+    ref: setRef
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createInitialEntry,
+  isIntersectionObserverSupported,
+  toIntersectionEntry,
+  useIntersectionObserver
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useIntersectionObserver.ts","../src/utils.ts"],"sourcesContent":["export { useIntersectionObserver } from \"./useIntersectionObserver\";\nexport type {\n  UseIntersectionObserverOptions,\n  UseIntersectionObserverReturn,\n  IntersectionEntry,\n  OnChangeCallback,\n} from \"./types\";\nexport {\n  isIntersectionObserverSupported,\n  toIntersectionEntry,\n  createInitialEntry,\n} from \"./utils\";\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  UseIntersectionObserverOptions,\n  UseIntersectionObserverReturn,\n  IntersectionEntry,\n  OnChangeCallback,\n} from \"./types\";\nimport {\n  isIntersectionObserverSupported,\n  toIntersectionEntry,\n  createInitialEntry,\n  createNoopRef,\n} from \"./utils\";\n\n/**\n * A React hook for observing element visibility using the Intersection Observer API.\n *\n * Features:\n * - Efficient viewport/container visibility detection\n * - Threshold-based intersection callbacks\n * - TriggerOnce support for lazy loading patterns\n * - Dynamic enable/disable support\n * - SSR compatible with graceful degradation\n * - TypeScript support with full type inference\n *\n * @param options - Configuration options for the observer\n * @returns Object containing entry data, inView boolean, and ref callback\n *\n * @example\n * ```tsx\n * // Basic usage - check if element is visible\n * function Component() {\n *   const { ref, inView } = useIntersectionObserver();\n *   return (\n *     <div ref={ref}>\n *       {inView ? 'Visible!' : 'Not visible'}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Lazy load image when it enters viewport\n * function LazyImage({ src, alt }: { src: string; alt: string }) {\n *   const { ref, inView } = useIntersectionObserver({\n *     triggerOnce: true,\n *     threshold: 0.1,\n *   });\n *\n *   return (\n *     <div ref={ref}>\n *       {inView ? (\n *         <img src={src} alt={alt} />\n *       ) : (\n *         <div className=\"placeholder\" />\n *       )}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Infinite scroll with sentinel element\n * function InfiniteList() {\n *   const { ref, inView } = useIntersectionObserver({\n *     threshold: 1.0,\n *     rootMargin: '100px',\n *   });\n *\n *   useEffect(() => {\n *     if (inView) {\n *       loadMoreItems();\n *     }\n *   }, [inView]);\n *\n *   return (\n *     <div>\n *       {items.map(item => <Item key={item.id} {...item} />)}\n *       <div ref={ref} />\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Track scroll progress with multiple thresholds\n * function ProgressTracker() {\n *   const { ref, entry } = useIntersectionObserver({\n *     threshold: [0, 0.25, 0.5, 0.75, 1.0],\n *     onChange: (entry, inView) => {\n *       console.log('Progress:', Math.round(entry.intersectionRatio * 100), '%');\n *     },\n *   });\n *\n *   return <div ref={ref}>Long content...</div>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Custom scroll container as root\n * function ScrollContainer() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const { ref, inView } = useIntersectionObserver({\n *     root: containerRef.current,\n *     rootMargin: '0px',\n *   });\n *\n *   return (\n *     <div ref={containerRef} style={{ overflow: 'auto', height: 400 }}>\n *       <div style={{ height: 1000 }}>\n *         <div ref={ref}>{inView ? 'In container view' : 'Outside'}</div>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useIntersectionObserver(\n  options: UseIntersectionObserverOptions = {}\n): UseIntersectionObserverReturn {\n  const {\n    threshold = 0,\n    root = null,\n    rootMargin = \"0px\",\n    triggerOnce = false,\n    enabled = true,\n    initialIsIntersecting = false,\n    onChange,\n    delay = 0,\n  } = options;\n\n  // ============ SSR Check ============\n  const isSupported = isIntersectionObserverSupported();\n\n  // ============ Refs for internal state (no re-renders) ============\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const targetRef = useRef<Element | null>(null);\n  const hasTriggeredRef = useRef<boolean>(false);\n  const delayTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Store previous entry values for comparison (to avoid unnecessary re-renders)\n  const prevEntryRef = useRef<{\n    isIntersecting: boolean;\n    intersectionRatio: number;\n  } | null>(null);\n\n  // Store callbacks in refs to avoid effect dependencies\n  const onChangeRef = useRef<OnChangeCallback | undefined>(onChange);\n  onChangeRef.current = onChange;\n\n  // Force re-render trigger for ref changes\n  const [, forceUpdate] = useState({});\n\n  // ============ State (triggers re-renders) ============\n  const [entry, setEntry] = useState<IntersectionEntry | null>(() =>\n    initialIsIntersecting ? createInitialEntry(true, null) : null\n  );\n\n  // Compute inView from entry state\n  const inView = entry?.isIntersecting ?? initialIsIntersecting;\n\n  // ============ Observer Callback ============\n  const handleIntersection = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      entries.forEach((nativeEntry) => {\n        const intersectionEntry = toIntersectionEntry(nativeEntry);\n\n        // Check if meaningful values have changed (ignore time which always changes)\n        const prevEntry = prevEntryRef.current;\n        const hasChanged =\n          !prevEntry ||\n          prevEntry.isIntersecting !== nativeEntry.isIntersecting ||\n          prevEntry.intersectionRatio !== nativeEntry.intersectionRatio;\n\n        // Update previous entry ref\n        prevEntryRef.current = {\n          isIntersecting: nativeEntry.isIntersecting,\n          intersectionRatio: nativeEntry.intersectionRatio,\n        };\n\n        // Only update state if meaningful values changed\n        if (hasChanged) {\n          setEntry(intersectionEntry);\n        }\n\n        // Call onChange callback if provided (always call, even if state didn't change)\n        if (onChangeRef.current) {\n          onChangeRef.current(intersectionEntry, nativeEntry.isIntersecting);\n        }\n\n        // Handle triggerOnce - unobserve after first intersection\n        if (triggerOnce && nativeEntry.isIntersecting) {\n          hasTriggeredRef.current = true;\n\n          // Unobserve the target\n          if (observerRef.current && nativeEntry.target) {\n            observerRef.current.unobserve(nativeEntry.target);\n          }\n        }\n      });\n    },\n    [triggerOnce]\n  );\n\n  // ============ Ref Callback ============\n  const setRef = useCallback((node: Element | null) => {\n    // Store previous target\n    const prevTarget = targetRef.current;\n\n    // Update target ref\n    targetRef.current = node;\n\n    // Force re-render to trigger useEffect with new target\n    if (prevTarget !== node) {\n      forceUpdate({});\n    }\n  }, []);\n\n  // ============ Effect: Manage Observer Lifecycle ============\n  useEffect(() => {\n    // SSR guard\n    if (!isSupported) {\n      return;\n    }\n\n    // Clean up existing observer\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    // Don't create observer if disabled\n    if (!enabled) {\n      return;\n    }\n\n    // Don't create if triggerOnce already triggered\n    if (triggerOnce && hasTriggeredRef.current) {\n      return;\n    }\n\n    // Don't create if no target\n    if (!targetRef.current) {\n      return;\n    }\n\n    const target = targetRef.current;\n\n    // Create and observe function\n    const createAndObserve = () => {\n      observerRef.current = new IntersectionObserver(handleIntersection, {\n        threshold,\n        root,\n        rootMargin,\n      });\n\n      if (target) {\n        observerRef.current.observe(target);\n      }\n    };\n\n    // Handle delay\n    if (delay > 0) {\n      delayTimeoutRef.current = setTimeout(() => {\n        createAndObserve();\n        delayTimeoutRef.current = null;\n      }, delay);\n\n      return () => {\n        if (delayTimeoutRef.current) {\n          clearTimeout(delayTimeoutRef.current);\n          delayTimeoutRef.current = null;\n        }\n        if (observerRef.current) {\n          observerRef.current.disconnect();\n          observerRef.current = null;\n        }\n      };\n    }\n\n    // Create observer immediately\n    createAndObserve();\n\n    // Cleanup\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    enabled,\n    triggerOnce,\n    delay,\n    threshold,\n    root,\n    rootMargin,\n    handleIntersection,\n    isSupported,\n    // Include target change trigger\n    targetRef.current,\n  ]);\n\n  // ============ Effect: Reset hasTriggered when triggerOnce is disabled ============\n  useEffect(() => {\n    if (!triggerOnce) {\n      hasTriggeredRef.current = false;\n    }\n  }, [triggerOnce]);\n\n  // ============ SSR Return ============\n  if (!isSupported) {\n    return {\n      entry: initialIsIntersecting ? createInitialEntry(true, null) : null,\n      inView: initialIsIntersecting,\n      ref: createNoopRef(),\n    };\n  }\n\n  return {\n    entry,\n    inView,\n    ref: setRef,\n  };\n}\n","import type { IntersectionEntry } from \"./types\";\n\n/**\n * Check if IntersectionObserver API is supported in the current environment\n * Returns false in SSR environments or browsers without support\n */\nexport function isIntersectionObserverSupported(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    \"IntersectionObserver\" in window\n  );\n}\n\n/**\n * Convert a native IntersectionObserverEntry to our IntersectionEntry type\n * Provides a consistent interface with additional convenience properties\n *\n * @param nativeEntry - The native IntersectionObserverEntry from the browser\n * @returns IntersectionEntry with all properties\n */\nexport function toIntersectionEntry(\n  nativeEntry: IntersectionObserverEntry\n): IntersectionEntry {\n  return {\n    entry: nativeEntry,\n    isIntersecting: nativeEntry.isIntersecting,\n    intersectionRatio: nativeEntry.intersectionRatio,\n    target: nativeEntry.target,\n    boundingClientRect: nativeEntry.boundingClientRect,\n    intersectionRect: nativeEntry.intersectionRect,\n    rootBounds: nativeEntry.rootBounds,\n    time: nativeEntry.time,\n  };\n}\n\n/**\n * Create an initial IntersectionEntry for SSR or before first observation\n * Used when initialIsIntersecting is true\n *\n * @param isIntersecting - Whether to set initial state as intersecting\n * @param target - Optional target element (null for SSR)\n * @returns A mock IntersectionEntry\n */\nexport function createInitialEntry(\n  isIntersecting: boolean,\n  target: Element | null = null\n): IntersectionEntry | null {\n  if (!isIntersecting) {\n    return null;\n  }\n\n  // Create a placeholder DOMRect for SSR\n  const emptyRect: DOMRectReadOnly = {\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    toJSON: () => ({}),\n  };\n\n  // Create a mock native entry\n  const mockNativeEntry = {\n    target: target as Element,\n    isIntersecting,\n    intersectionRatio: isIntersecting ? 1 : 0,\n    boundingClientRect: emptyRect,\n    intersectionRect: emptyRect,\n    rootBounds: null,\n    time: typeof performance !== \"undefined\" ? performance.now() : Date.now(),\n  } as IntersectionObserverEntry;\n\n  return {\n    entry: mockNativeEntry,\n    isIntersecting,\n    intersectionRatio: isIntersecting ? 1 : 0,\n    target: target as Element,\n    boundingClientRect: emptyRect,\n    intersectionRect: emptyRect,\n    rootBounds: null,\n    time: mockNativeEntry.time,\n  };\n}\n\n/**\n * Normalize threshold to always be an array\n * Handles both single number and array inputs\n *\n * @param threshold - Single threshold or array of thresholds\n * @returns Array of threshold values\n */\nexport function normalizeThreshold(\n  threshold: number | number[] | undefined\n): number[] {\n  if (threshold === undefined) {\n    return [0];\n  }\n  if (Array.isArray(threshold)) {\n    return threshold;\n  }\n  return [threshold];\n}\n\n/**\n * Deep compare two IntersectionObserverInit options objects\n * Used to determine if observer needs to be recreated\n *\n * @param a - First options object\n * @param b - Second options object\n * @returns true if options are equal\n */\nexport function areOptionsEqual(\n  a: IntersectionObserverInit,\n  b: IntersectionObserverInit\n): boolean {\n  // Compare root\n  if (a.root !== b.root) {\n    return false;\n  }\n\n  // Compare rootMargin\n  if (a.rootMargin !== b.rootMargin) {\n    return false;\n  }\n\n  // Compare threshold (normalize to arrays for comparison)\n  const thresholdA = normalizeThreshold(a.threshold);\n  const thresholdB = normalizeThreshold(b.threshold);\n\n  if (thresholdA.length !== thresholdB.length) {\n    return false;\n  }\n\n  for (let i = 0; i < thresholdA.length; i++) {\n    if (thresholdA[i] !== thresholdB[i]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * Create a no-op ref callback for SSR environments\n * Returns a function that does nothing when called\n */\nexport function createNoopRef(): (node: Element | null) => void {\n  return () => {\n    // No-op for SSR\n  };\n}\n\n/**\n * Validate rootMargin string format\n * rootMargin follows CSS margin syntax: \"10px\", \"10px 20px\", \"10px 20px 30px 40px\"\n *\n * @param rootMargin - The rootMargin string to validate\n * @returns true if valid format\n */\nexport function isValidRootMargin(rootMargin: string): boolean {\n  // Basic validation - rootMargin should contain px or %\n  // Browser will handle more detailed validation\n  const pattern = /^(-?\\d+(\\.\\d+)?(px|%)?\\s*){1,4}$/;\n  return pattern.test(rootMargin.trim());\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;;;ACMlD,SAAS,kCAA2C;AACzD,SACE,OAAO,WAAW,eAClB,0BAA0B;AAE9B;AASO,SAAS,oBACd,aACmB;AACnB,SAAO;AAAA,IACL,OAAO;AAAA,IACP,gBAAgB,YAAY;AAAA,IAC5B,mBAAmB,YAAY;AAAA,IAC/B,QAAQ,YAAY;AAAA,IACpB,oBAAoB,YAAY;AAAA,IAChC,kBAAkB,YAAY;AAAA,IAC9B,YAAY,YAAY;AAAA,IACxB,MAAM,YAAY;AAAA,EACpB;AACF;AAUO,SAAS,mBACd,gBACA,SAAyB,MACC;AAC1B,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AAGA,QAAM,YAA6B;AAAA,IACjC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ,OAAO,CAAC;AAAA,EAClB;AAGA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,mBAAmB,iBAAiB,IAAI;AAAA,IACxC,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,MAAM,OAAO,gBAAgB,cAAc,YAAY,IAAI,IAAI,KAAK,IAAI;AAAA,EAC1E;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB,iBAAiB,IAAI;AAAA,IACxC;AAAA,IACA,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,MAAM,gBAAgB;AAAA,EACxB;AACF;AAgEO,SAAS,gBAAgD;AAC9D,SAAO,MAAM;AAAA,EAEb;AACF;;;ADhCO,SAAS,wBACd,UAA0C,CAAC,GACZ;AAC/B,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,cAAc;AAAA,IACd,UAAU;AAAA,IACV,wBAAwB;AAAA,IACxB;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,QAAM,cAAc,gCAAgC;AAGpD,QAAM,kBAAc,qBAAoC,IAAI;AAC5D,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,sBAAkB,qBAAgB,KAAK;AAC7C,QAAM,sBAAkB,qBAA6C,IAAI;AAGzE,QAAM,mBAAe,qBAGX,IAAI;AAGd,QAAM,kBAAc,qBAAqC,QAAQ;AACjE,cAAY,UAAU;AAGtB,QAAM,CAAC,EAAE,WAAW,QAAI,uBAAS,CAAC,CAAC;AAGnC,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IAAmC,MAC3D,wBAAwB,mBAAmB,MAAM,IAAI,IAAI;AAAA,EAC3D;AAGA,QAAM,SAAS,OAAO,kBAAkB;AAGxC,QAAM,yBAAqB;AAAA,IACzB,CAAC,YAAyC;AACxC,cAAQ,QAAQ,CAAC,gBAAgB;AAC/B,cAAM,oBAAoB,oBAAoB,WAAW;AAGzD,cAAM,YAAY,aAAa;AAC/B,cAAM,aACJ,CAAC,aACD,UAAU,mBAAmB,YAAY,kBACzC,UAAU,sBAAsB,YAAY;AAG9C,qBAAa,UAAU;AAAA,UACrB,gBAAgB,YAAY;AAAA,UAC5B,mBAAmB,YAAY;AAAA,QACjC;AAGA,YAAI,YAAY;AACd,mBAAS,iBAAiB;AAAA,QAC5B;AAGA,YAAI,YAAY,SAAS;AACvB,sBAAY,QAAQ,mBAAmB,YAAY,cAAc;AAAA,QACnE;AAGA,YAAI,eAAe,YAAY,gBAAgB;AAC7C,0BAAgB,UAAU;AAG1B,cAAI,YAAY,WAAW,YAAY,QAAQ;AAC7C,wBAAY,QAAQ,UAAU,YAAY,MAAM;AAAA,UAClD;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAGA,QAAM,aAAS,0BAAY,CAAC,SAAyB;AAEnD,UAAM,aAAa,UAAU;AAG7B,cAAU,UAAU;AAGpB,QAAI,eAAe,MAAM;AACvB,kBAAY,CAAC,CAAC;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,8BAAU,MAAM;AAEd,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AAGA,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,WAAW;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAGA,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAGA,QAAI,eAAe,gBAAgB,SAAS;AAC1C;AAAA,IACF;AAGA,QAAI,CAAC,UAAU,SAAS;AACtB;AAAA,IACF;AAEA,UAAM,SAAS,UAAU;AAGzB,UAAM,mBAAmB,MAAM;AAC7B,kBAAY,UAAU,IAAI,qBAAqB,oBAAoB;AAAA,QACjE;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,UAAI,QAAQ;AACV,oBAAY,QAAQ,QAAQ,MAAM;AAAA,MACpC;AAAA,IACF;AAGA,QAAI,QAAQ,GAAG;AACb,sBAAgB,UAAU,WAAW,MAAM;AACzC,yBAAiB;AACjB,wBAAgB,UAAU;AAAA,MAC5B,GAAG,KAAK;AAER,aAAO,MAAM;AACX,YAAI,gBAAgB,SAAS;AAC3B,uBAAa,gBAAgB,OAAO;AACpC,0BAAgB,UAAU;AAAA,QAC5B;AACA,YAAI,YAAY,SAAS;AACvB,sBAAY,QAAQ,WAAW;AAC/B,sBAAY,UAAU;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAGA,qBAAiB;AAGjB,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ,WAAW;AAC/B,oBAAY,UAAU;AAAA,MACxB;AAAA,IACF;AAAA,EAEF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,UAAU;AAAA,EACZ,CAAC;AAGD,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa;AAChB,sBAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAGhB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,MACL,OAAO,wBAAwB,mBAAmB,MAAM,IAAI,IAAI;AAAA,MAChE,QAAQ;AAAA,MACR,KAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK;AAAA,EACP;AACF;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,205 @@
+// src/useIntersectionObserver.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/utils.ts
+function isIntersectionObserverSupported() {
+  return typeof window !== "undefined" && "IntersectionObserver" in window;
+}
+function toIntersectionEntry(nativeEntry) {
+  return {
+    entry: nativeEntry,
+    isIntersecting: nativeEntry.isIntersecting,
+    intersectionRatio: nativeEntry.intersectionRatio,
+    target: nativeEntry.target,
+    boundingClientRect: nativeEntry.boundingClientRect,
+    intersectionRect: nativeEntry.intersectionRect,
+    rootBounds: nativeEntry.rootBounds,
+    time: nativeEntry.time
+  };
+}
+function createInitialEntry(isIntersecting, target = null) {
+  if (!isIntersecting) {
+    return null;
+  }
+  const emptyRect = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    toJSON: () => ({})
+  };
+  const mockNativeEntry = {
+    target,
+    isIntersecting,
+    intersectionRatio: isIntersecting ? 1 : 0,
+    boundingClientRect: emptyRect,
+    intersectionRect: emptyRect,
+    rootBounds: null,
+    time: typeof performance !== "undefined" ? performance.now() : Date.now()
+  };
+  return {
+    entry: mockNativeEntry,
+    isIntersecting,
+    intersectionRatio: isIntersecting ? 1 : 0,
+    target,
+    boundingClientRect: emptyRect,
+    intersectionRect: emptyRect,
+    rootBounds: null,
+    time: mockNativeEntry.time
+  };
+}
+function createNoopRef() {
+  return () => {
+  };
+}
+
+// src/useIntersectionObserver.ts
+function useIntersectionObserver(options = {}) {
+  const {
+    threshold = 0,
+    root = null,
+    rootMargin = "0px",
+    triggerOnce = false,
+    enabled = true,
+    initialIsIntersecting = false,
+    onChange,
+    delay = 0
+  } = options;
+  const isSupported = isIntersectionObserverSupported();
+  const observerRef = useRef(null);
+  const targetRef = useRef(null);
+  const hasTriggeredRef = useRef(false);
+  const delayTimeoutRef = useRef(null);
+  const prevEntryRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const [, forceUpdate] = useState({});
+  const [entry, setEntry] = useState(
+    () => initialIsIntersecting ? createInitialEntry(true, null) : null
+  );
+  const inView = entry?.isIntersecting ?? initialIsIntersecting;
+  const handleIntersection = useCallback(
+    (entries) => {
+      entries.forEach((nativeEntry) => {
+        const intersectionEntry = toIntersectionEntry(nativeEntry);
+        const prevEntry = prevEntryRef.current;
+        const hasChanged = !prevEntry || prevEntry.isIntersecting !== nativeEntry.isIntersecting || prevEntry.intersectionRatio !== nativeEntry.intersectionRatio;
+        prevEntryRef.current = {
+          isIntersecting: nativeEntry.isIntersecting,
+          intersectionRatio: nativeEntry.intersectionRatio
+        };
+        if (hasChanged) {
+          setEntry(intersectionEntry);
+        }
+        if (onChangeRef.current) {
+          onChangeRef.current(intersectionEntry, nativeEntry.isIntersecting);
+        }
+        if (triggerOnce && nativeEntry.isIntersecting) {
+          hasTriggeredRef.current = true;
+          if (observerRef.current && nativeEntry.target) {
+            observerRef.current.unobserve(nativeEntry.target);
+          }
+        }
+      });
+    },
+    [triggerOnce]
+  );
+  const setRef = useCallback((node) => {
+    const prevTarget = targetRef.current;
+    targetRef.current = node;
+    if (prevTarget !== node) {
+      forceUpdate({});
+    }
+  }, []);
+  useEffect(() => {
+    if (!isSupported) {
+      return;
+    }
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!enabled) {
+      return;
+    }
+    if (triggerOnce && hasTriggeredRef.current) {
+      return;
+    }
+    if (!targetRef.current) {
+      return;
+    }
+    const target = targetRef.current;
+    const createAndObserve = () => {
+      observerRef.current = new IntersectionObserver(handleIntersection, {
+        threshold,
+        root,
+        rootMargin
+      });
+      if (target) {
+        observerRef.current.observe(target);
+      }
+    };
+    if (delay > 0) {
+      delayTimeoutRef.current = setTimeout(() => {
+        createAndObserve();
+        delayTimeoutRef.current = null;
+      }, delay);
+      return () => {
+        if (delayTimeoutRef.current) {
+          clearTimeout(delayTimeoutRef.current);
+          delayTimeoutRef.current = null;
+        }
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+      };
+    }
+    createAndObserve();
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [
+    enabled,
+    triggerOnce,
+    delay,
+    threshold,
+    root,
+    rootMargin,
+    handleIntersection,
+    isSupported,
+    // Include target change trigger
+    targetRef.current
+  ]);
+  useEffect(() => {
+    if (!triggerOnce) {
+      hasTriggeredRef.current = false;
+    }
+  }, [triggerOnce]);
+  if (!isSupported) {
+    return {
+      entry: initialIsIntersecting ? createInitialEntry(true, null) : null,
+      inView: initialIsIntersecting,
+      ref: createNoopRef()
+    };
+  }
+  return {
+    entry,
+    inView,
+    ref: setRef
+  };
+}
+export {
+  createInitialEntry,
+  isIntersectionObserverSupported,
+  toIntersectionEntry,
+  useIntersectionObserver
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useIntersectionObserver.ts","../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  UseIntersectionObserverOptions,\n  UseIntersectionObserverReturn,\n  IntersectionEntry,\n  OnChangeCallback,\n} from \"./types\";\nimport {\n  isIntersectionObserverSupported,\n  toIntersectionEntry,\n  createInitialEntry,\n  createNoopRef,\n} from \"./utils\";\n\n/**\n * A React hook for observing element visibility using the Intersection Observer API.\n *\n * Features:\n * - Efficient viewport/container visibility detection\n * - Threshold-based intersection callbacks\n * - TriggerOnce support for lazy loading patterns\n * - Dynamic enable/disable support\n * - SSR compatible with graceful degradation\n * - TypeScript support with full type inference\n *\n * @param options - Configuration options for the observer\n * @returns Object containing entry data, inView boolean, and ref callback\n *\n * @example\n * ```tsx\n * // Basic usage - check if element is visible\n * function Component() {\n *   const { ref, inView } = useIntersectionObserver();\n *   return (\n *     <div ref={ref}>\n *       {inView ? 'Visible!' : 'Not visible'}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Lazy load image when it enters viewport\n * function LazyImage({ src, alt }: { src: string; alt: string }) {\n *   const { ref, inView } = useIntersectionObserver({\n *     triggerOnce: true,\n *     threshold: 0.1,\n *   });\n *\n *   return (\n *     <div ref={ref}>\n *       {inView ? (\n *         <img src={src} alt={alt} />\n *       ) : (\n *         <div className=\"placeholder\" />\n *       )}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Infinite scroll with sentinel element\n * function InfiniteList() {\n *   const { ref, inView } = useIntersectionObserver({\n *     threshold: 1.0,\n *     rootMargin: '100px',\n *   });\n *\n *   useEffect(() => {\n *     if (inView) {\n *       loadMoreItems();\n *     }\n *   }, [inView]);\n *\n *   return (\n *     <div>\n *       {items.map(item => <Item key={item.id} {...item} />)}\n *       <div ref={ref} />\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Track scroll progress with multiple thresholds\n * function ProgressTracker() {\n *   const { ref, entry } = useIntersectionObserver({\n *     threshold: [0, 0.25, 0.5, 0.75, 1.0],\n *     onChange: (entry, inView) => {\n *       console.log('Progress:', Math.round(entry.intersectionRatio * 100), '%');\n *     },\n *   });\n *\n *   return <div ref={ref}>Long content...</div>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Custom scroll container as root\n * function ScrollContainer() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const { ref, inView } = useIntersectionObserver({\n *     root: containerRef.current,\n *     rootMargin: '0px',\n *   });\n *\n *   return (\n *     <div ref={containerRef} style={{ overflow: 'auto', height: 400 }}>\n *       <div style={{ height: 1000 }}>\n *         <div ref={ref}>{inView ? 'In container view' : 'Outside'}</div>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useIntersectionObserver(\n  options: UseIntersectionObserverOptions = {}\n): UseIntersectionObserverReturn {\n  const {\n    threshold = 0,\n    root = null,\n    rootMargin = \"0px\",\n    triggerOnce = false,\n    enabled = true,\n    initialIsIntersecting = false,\n    onChange,\n    delay = 0,\n  } = options;\n\n  // ============ SSR Check ============\n  const isSupported = isIntersectionObserverSupported();\n\n  // ============ Refs for internal state (no re-renders) ============\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const targetRef = useRef<Element | null>(null);\n  const hasTriggeredRef = useRef<boolean>(false);\n  const delayTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Store previous entry values for comparison (to avoid unnecessary re-renders)\n  const prevEntryRef = useRef<{\n    isIntersecting: boolean;\n    intersectionRatio: number;\n  } | null>(null);\n\n  // Store callbacks in refs to avoid effect dependencies\n  const onChangeRef = useRef<OnChangeCallback | undefined>(onChange);\n  onChangeRef.current = onChange;\n\n  // Force re-render trigger for ref changes\n  const [, forceUpdate] = useState({});\n\n  // ============ State (triggers re-renders) ============\n  const [entry, setEntry] = useState<IntersectionEntry | null>(() =>\n    initialIsIntersecting ? createInitialEntry(true, null) : null\n  );\n\n  // Compute inView from entry state\n  const inView = entry?.isIntersecting ?? initialIsIntersecting;\n\n  // ============ Observer Callback ============\n  const handleIntersection = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      entries.forEach((nativeEntry) => {\n        const intersectionEntry = toIntersectionEntry(nativeEntry);\n\n        // Check if meaningful values have changed (ignore time which always changes)\n        const prevEntry = prevEntryRef.current;\n        const hasChanged =\n          !prevEntry ||\n          prevEntry.isIntersecting !== nativeEntry.isIntersecting ||\n          prevEntry.intersectionRatio !== nativeEntry.intersectionRatio;\n\n        // Update previous entry ref\n        prevEntryRef.current = {\n          isIntersecting: nativeEntry.isIntersecting,\n          intersectionRatio: nativeEntry.intersectionRatio,\n        };\n\n        // Only update state if meaningful values changed\n        if (hasChanged) {\n          setEntry(intersectionEntry);\n        }\n\n        // Call onChange callback if provided (always call, even if state didn't change)\n        if (onChangeRef.current) {\n          onChangeRef.current(intersectionEntry, nativeEntry.isIntersecting);\n        }\n\n        // Handle triggerOnce - unobserve after first intersection\n        if (triggerOnce && nativeEntry.isIntersecting) {\n          hasTriggeredRef.current = true;\n\n          // Unobserve the target\n          if (observerRef.current && nativeEntry.target) {\n            observerRef.current.unobserve(nativeEntry.target);\n          }\n        }\n      });\n    },\n    [triggerOnce]\n  );\n\n  // ============ Ref Callback ============\n  const setRef = useCallback((node: Element | null) => {\n    // Store previous target\n    const prevTarget = targetRef.current;\n\n    // Update target ref\n    targetRef.current = node;\n\n    // Force re-render to trigger useEffect with new target\n    if (prevTarget !== node) {\n      forceUpdate({});\n    }\n  }, []);\n\n  // ============ Effect: Manage Observer Lifecycle ============\n  useEffect(() => {\n    // SSR guard\n    if (!isSupported) {\n      return;\n    }\n\n    // Clean up existing observer\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    // Don't create observer if disabled\n    if (!enabled) {\n      return;\n    }\n\n    // Don't create if triggerOnce already triggered\n    if (triggerOnce && hasTriggeredRef.current) {\n      return;\n    }\n\n    // Don't create if no target\n    if (!targetRef.current) {\n      return;\n    }\n\n    const target = targetRef.current;\n\n    // Create and observe function\n    const createAndObserve = () => {\n      observerRef.current = new IntersectionObserver(handleIntersection, {\n        threshold,\n        root,\n        rootMargin,\n      });\n\n      if (target) {\n        observerRef.current.observe(target);\n      }\n    };\n\n    // Handle delay\n    if (delay > 0) {\n      delayTimeoutRef.current = setTimeout(() => {\n        createAndObserve();\n        delayTimeoutRef.current = null;\n      }, delay);\n\n      return () => {\n        if (delayTimeoutRef.current) {\n          clearTimeout(delayTimeoutRef.current);\n          delayTimeoutRef.current = null;\n        }\n        if (observerRef.current) {\n          observerRef.current.disconnect();\n          observerRef.current = null;\n        }\n      };\n    }\n\n    // Create observer immediately\n    createAndObserve();\n\n    // Cleanup\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    enabled,\n    triggerOnce,\n    delay,\n    threshold,\n    root,\n    rootMargin,\n    handleIntersection,\n    isSupported,\n    // Include target change trigger\n    targetRef.current,\n  ]);\n\n  // ============ Effect: Reset hasTriggered when triggerOnce is disabled ============\n  useEffect(() => {\n    if (!triggerOnce) {\n      hasTriggeredRef.current = false;\n    }\n  }, [triggerOnce]);\n\n  // ============ SSR Return ============\n  if (!isSupported) {\n    return {\n      entry: initialIsIntersecting ? createInitialEntry(true, null) : null,\n      inView: initialIsIntersecting,\n      ref: createNoopRef(),\n    };\n  }\n\n  return {\n    entry,\n    inView,\n    ref: setRef,\n  };\n}\n","import type { IntersectionEntry } from \"./types\";\n\n/**\n * Check if IntersectionObserver API is supported in the current environment\n * Returns false in SSR environments or browsers without support\n */\nexport function isIntersectionObserverSupported(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    \"IntersectionObserver\" in window\n  );\n}\n\n/**\n * Convert a native IntersectionObserverEntry to our IntersectionEntry type\n * Provides a consistent interface with additional convenience properties\n *\n * @param nativeEntry - The native IntersectionObserverEntry from the browser\n * @returns IntersectionEntry with all properties\n */\nexport function toIntersectionEntry(\n  nativeEntry: IntersectionObserverEntry\n): IntersectionEntry {\n  return {\n    entry: nativeEntry,\n    isIntersecting: nativeEntry.isIntersecting,\n    intersectionRatio: nativeEntry.intersectionRatio,\n    target: nativeEntry.target,\n    boundingClientRect: nativeEntry.boundingClientRect,\n    intersectionRect: nativeEntry.intersectionRect,\n    rootBounds: nativeEntry.rootBounds,\n    time: nativeEntry.time,\n  };\n}\n\n/**\n * Create an initial IntersectionEntry for SSR or before first observation\n * Used when initialIsIntersecting is true\n *\n * @param isIntersecting - Whether to set initial state as intersecting\n * @param target - Optional target element (null for SSR)\n * @returns A mock IntersectionEntry\n */\nexport function createInitialEntry(\n  isIntersecting: boolean,\n  target: Element | null = null\n): IntersectionEntry | null {\n  if (!isIntersecting) {\n    return null;\n  }\n\n  // Create a placeholder DOMRect for SSR\n  const emptyRect: DOMRectReadOnly = {\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    toJSON: () => ({}),\n  };\n\n  // Create a mock native entry\n  const mockNativeEntry = {\n    target: target as Element,\n    isIntersecting,\n    intersectionRatio: isIntersecting ? 1 : 0,\n    boundingClientRect: emptyRect,\n    intersectionRect: emptyRect,\n    rootBounds: null,\n    time: typeof performance !== \"undefined\" ? performance.now() : Date.now(),\n  } as IntersectionObserverEntry;\n\n  return {\n    entry: mockNativeEntry,\n    isIntersecting,\n    intersectionRatio: isIntersecting ? 1 : 0,\n    target: target as Element,\n    boundingClientRect: emptyRect,\n    intersectionRect: emptyRect,\n    rootBounds: null,\n    time: mockNativeEntry.time,\n  };\n}\n\n/**\n * Normalize threshold to always be an array\n * Handles both single number and array inputs\n *\n * @param threshold - Single threshold or array of thresholds\n * @returns Array of threshold values\n */\nexport function normalizeThreshold(\n  threshold: number | number[] | undefined\n): number[] {\n  if (threshold === undefined) {\n    return [0];\n  }\n  if (Array.isArray(threshold)) {\n    return threshold;\n  }\n  return [threshold];\n}\n\n/**\n * Deep compare two IntersectionObserverInit options objects\n * Used to determine if observer needs to be recreated\n *\n * @param a - First options object\n * @param b - Second options object\n * @returns true if options are equal\n */\nexport function areOptionsEqual(\n  a: IntersectionObserverInit,\n  b: IntersectionObserverInit\n): boolean {\n  // Compare root\n  if (a.root !== b.root) {\n    return false;\n  }\n\n  // Compare rootMargin\n  if (a.rootMargin !== b.rootMargin) {\n    return false;\n  }\n\n  // Compare threshold (normalize to arrays for comparison)\n  const thresholdA = normalizeThreshold(a.threshold);\n  const thresholdB = normalizeThreshold(b.threshold);\n\n  if (thresholdA.length !== thresholdB.length) {\n    return false;\n  }\n\n  for (let i = 0; i < thresholdA.length; i++) {\n    if (thresholdA[i] !== thresholdB[i]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * Create a no-op ref callback for SSR environments\n * Returns a function that does nothing when called\n */\nexport function createNoopRef(): (node: Element | null) => void {\n  return () => {\n    // No-op for SSR\n  };\n}\n\n/**\n * Validate rootMargin string format\n * rootMargin follows CSS margin syntax: \"10px\", \"10px 20px\", \"10px 20px 30px 40px\"\n *\n * @param rootMargin - The rootMargin string to validate\n * @returns true if valid format\n */\nexport function isValidRootMargin(rootMargin: string): boolean {\n  // Basic validation - rootMargin should contain px or %\n  // Browser will handle more detailed validation\n  const pattern = /^(-?\\d+(\\.\\d+)?(px|%)?\\s*){1,4}$/;\n  return pattern.test(rootMargin.trim());\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@usefy/use-intersection-observer",
+  "version": "0.0.1",
+  "description": "A React hook for observing element visibility using Intersection Observer API with enterprise-grade features",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mirunamu00/usefy.git",
+    "directory": "packages/use-intersection-observer"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hooks",
+    "intersection-observer",
+    "viewport",
+    "visibility",
+    "lazy-loading",
+    "infinite-scroll",
+    "scroll-animation",
+    "useIntersectionObserver"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}