react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-beta.5 to 1.0.0-beta.6

dist/es/lib/useInViewport.js

@@ -32,2 +32,4 @@ "use strict";
   var leaveCountRef = (0, _react.useRef)(0);
+  // State to track when target is available
+  var [isTargetReady, setIsTargetReady] = (0, _react.useState)(Boolean(target.current));
   function startObserver(_ref) {
@@ -116,17 +118,23 @@ var {
 
-  // handles when ref changes
+  // Use MutationObserver to detect when `target.current` becomes non-null
+  // only at start up
   (0, _react.useEffect)(() => {
     var currentElement = target.current;
-    var observerRef = observer.current;
+    var mutationObserver = null;
+
+    // MutationObserver callback to check when the target ref is assigned
     var handleOnChange = () => {
-      startObserver({
-        observerRef
-      });
+      if (target.current && !isTargetReady) {
+        setIsTargetReady(true);
+        if (mutationObserver) {
+          mutationObserver.disconnect();
+        }
+      }
     };
-    var mutationObserver;
     if (currentElement) {
+      setIsTargetReady(true); // If target is already available, mark it ready
+    } else {
+      // Observe changes to detect when `target.current` becomes non-null
       mutationObserver = new MutationObserver(handleOnChange);
-
-      // Start observing the DOM element for mutations
-      mutationObserver.observe(currentElement, defaultMutationObserverOption);
+      mutationObserver.observe(document.body, defaultMutationObserverOption);
     }
@@ -133,0 +141,0 @@

dist/lib/useInViewport.js

@@ -32,2 +32,6 @@ "use strict";
   var leaveCountRef = (0, _react.useRef)(0);
+  // State to track when target is available
+  var _useState2 = (0, _react.useState)(Boolean(target.current)),
+    isTargetReady = _useState2[0],
+    setIsTargetReady = _useState2[1];
   function startObserver(_ref) {
@@ -108,17 +112,23 @@ var observerRef = _ref.observerRef;
 
-  // handles when ref changes
+  // Use MutationObserver to detect when `target.current` becomes non-null
+  // only at start up
   (0, _react.useEffect)(function () {
     var currentElement = target.current;
-    var observerRef = observer.current;
+    var mutationObserver = null;
+
+    // MutationObserver callback to check when the target ref is assigned
     var handleOnChange = function handleOnChange() {
-      startObserver({
-        observerRef: observerRef
-      });
+      if (target.current && !isTargetReady) {
+        setIsTargetReady(true);
+        if (mutationObserver) {
+          mutationObserver.disconnect();
+        }
+      }
     };
-    var mutationObserver;
     if (currentElement) {
+      setIsTargetReady(true); // If target is already available, mark it ready
+    } else {
+      // Observe changes to detect when `target.current` becomes non-null
       mutationObserver = new MutationObserver(handleOnChange);
-
-      // Start observing the DOM element for mutations
-      mutationObserver.observe(currentElement, defaultMutationObserverOption);
+      mutationObserver.observe(document.body, defaultMutationObserverOption);
     }
@@ -125,0 +135,0 @@

dist/next/lib/useInViewport.js

@@ -28,2 +28,6 @@ import { useEffect, useRef, useState } from 'react';
   var leaveCountRef = useRef(0);
+  // State to track when target is available
+  var _useState2 = useState(Boolean(target.current)),
+    isTargetReady = _useState2[0],
+    setIsTargetReady = _useState2[1];
   function startObserver(_ref) {
@@ -104,17 +108,23 @@ var observerRef = _ref.observerRef;
 
-  // handles when ref changes
+  // Use MutationObserver to detect when `target.current` becomes non-null
+  // only at start up
   useEffect(function () {
     var currentElement = target.current;
-    var observerRef = observer.current;
+    var mutationObserver = null;
+
+    // MutationObserver callback to check when the target ref is assigned
     var handleOnChange = function handleOnChange() {
-      startObserver({
-        observerRef: observerRef
-      });
+      if (target.current && !isTargetReady) {
+        setIsTargetReady(true);
+        if (mutationObserver) {
+          mutationObserver.disconnect();
+        }
+      }
     };
-    var mutationObserver;
     if (currentElement) {
+      setIsTargetReady(true); // If target is already available, mark it ready
+    } else {
+      // Observe changes to detect when `target.current` becomes non-null
       mutationObserver = new MutationObserver(handleOnChange);
-
-      // Start observing the DOM element for mutations
-      mutationObserver.observe(currentElement, defaultMutationObserverOption);
+      mutationObserver.observe(document.body, defaultMutationObserverOption);
     }
@@ -121,0 +131,0 @@

dist/types/lib/useInViewport.js

@@ -18,2 +18,4 @@ "use strict";
     const leaveCountRef = (0, react_1.useRef)(0);
+    // State to track when target is available
+    const [isTargetReady, setIsTargetReady] = (0, react_1.useState)(Boolean(target.current));
     function startObserver({ observerRef }) {
@@ -87,16 +89,23 @@ const targetRef = target.current;
     }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
-    // handles when ref changes
+    // Use MutationObserver to detect when `target.current` becomes non-null
+    // only at start up
     (0, react_1.useEffect)(() => {
         const currentElement = target.current;
-        const observerRef = observer.current;
+        let mutationObserver = null;
+        // MutationObserver callback to check when the target ref is assigned
         const handleOnChange = () => {
-            startObserver({
-                observerRef,
-            });
+            if (target.current && !isTargetReady) {
+                setIsTargetReady(true);
+                if (mutationObserver) {
+                    mutationObserver.disconnect();
+                }
+            }
         };
-        let mutationObserver;
         if (currentElement) {
+            setIsTargetReady(true); // If target is already available, mark it ready
+        }
+        else {
+            // Observe changes to detect when `target.current` becomes non-null
             mutationObserver = new MutationObserver(handleOnChange);
-            // Start observing the DOM element for mutations
-            mutationObserver.observe(currentElement, defaultMutationObserverOption);
+            mutationObserver.observe(document.body, defaultMutationObserverOption);
         }
@@ -103,0 +112,0 @@ // Cleanup function to stop observing when the component unmounts

dist/umd/lib/useInViewport.js

@@ -43,2 +43,6 @@ (function (global, factory) {
     var leaveCountRef = (0, _react.useRef)(0);
+    // State to track when target is available
+    var _useState2 = (0, _react.useState)(Boolean(target.current)),
+      isTargetReady = _useState2[0],
+      setIsTargetReady = _useState2[1];
     function startObserver(_ref) {
@@ -119,17 +123,23 @@ var observerRef = _ref.observerRef;
 
-    // handles when ref changes
+    // Use MutationObserver to detect when `target.current` becomes non-null
+    // only at start up
     (0, _react.useEffect)(function () {
       var currentElement = target.current;
-      var observerRef = observer.current;
+      var mutationObserver = null;
+
+      // MutationObserver callback to check when the target ref is assigned
       var handleOnChange = function handleOnChange() {
-        startObserver({
-          observerRef: observerRef
-        });
+        if (target.current && !isTargetReady) {
+          setIsTargetReady(true);
+          if (mutationObserver) {
+            mutationObserver.disconnect();
+          }
+        }
       };
-      var mutationObserver;
       if (currentElement) {
+        setIsTargetReady(true); // If target is already available, mark it ready
+      } else {
+        // Observe changes to detect when `target.current` becomes non-null
         mutationObserver = new MutationObserver(handleOnChange);
-
-        // Start observing the DOM element for mutations
-        mutationObserver.observe(currentElement, defaultMutationObserverOption);
+        mutationObserver.observe(document.body, defaultMutationObserverOption);
       }
@@ -136,0 +146,0 @@

package.json

 {
   "name": "react-in-viewport",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "Track React component in viewport using Intersection Observer API",
@@ -5,0 +5,0 @@ "author": "Roderick Hsiao <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

110059

increased by2.34%

Lines of code

1817

increased by2.66%

No dependency changes