react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

dist/es/lib/useInViewport.js

@@ -7,27 +7,6 @@ "use strict";
 var _constants = require("./constants");
-var useDOMObserver = function useDOMObserver(ref, onChange, options) {
-  if (options === void 0) {
-    options = {
-      attributes: true,
-      childList: true,
-      subtree: true
-    };
-  }
-  (0, _react.useEffect)(() => {
-    var currentElement = ref.current;
-    var observer;
-    if (currentElement) {
-      observer = new MutationObserver(onChange);
-
-      // Start observing the DOM element for mutations
-      observer.observe(currentElement, options);
-    }
-
-    // Cleanup function to stop observing when the component unmounts
-    return () => {
-      if (observer) {
-        observer.disconnect();
-      }
-    };
-  }, [ref, onChange, options]);
+var defaultMutationObserverOption = {
+  attributes: true,
+  childList: true,
+  subtree: true
 };
@@ -121,6 +100,8 @@ var useInViewport = function useInViewport(target, options, config, props) {
   }
-  var attachObserver = (0, _react.useCallback)(_ref4 => {
-    var {
+  (0, _react.useEffect)(() => {
+    var observerRef = observer.current;
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    observerRef = initIntersectionObserver({
       observerRef
-    } = _ref4;
+    });
     startObserver({
@@ -134,22 +115,28 @@ observerRef
     };
-  }, []);
-  var handleMutation = (0, _react.useCallback)(() => {
-    var observerRef = observer.current;
-    attachObserver({
-      observerRef
-    });
-  }, []);
+  }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+
+  // handles when ref changes
   (0, _react.useEffect)(() => {
+    var currentElement = target.current;
     var observerRef = observer.current;
-    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-    observerRef = initIntersectionObserver({
-      observerRef
-    });
-    attachObserver({
-      observerRef
-    });
-  }, [options, config, onEnterViewport, onLeaveViewport]);
+    var handleOnChange = () => {
+      startObserver({
+        observerRef
+      });
+    };
+    var mutationObserver;
+    if (currentElement) {
+      mutationObserver = new MutationObserver(handleOnChange);
 
-  // handles when ref changes
-  useDOMObserver(target, handleMutation);
+      // Start observing the DOM element for mutations
+      mutationObserver.observe(currentElement, defaultMutationObserverOption);
+    }
+
+    // Cleanup function to stop observing when the component unmounts
+    return () => {
+      if (observer) {
+        mutationObserver.disconnect();
+      }
+    };
+  }, [target.current]);
   return {
@@ -156,0 +143,0 @@ inViewport: inViewportRef.current,

dist/lib/useInViewport.js

@@ -7,27 +7,6 @@ "use strict";
 var _constants = require("./constants");
-var useDOMObserver = function useDOMObserver(ref, onChange, options) {
-  if (options === void 0) {
-    options = {
-      attributes: true,
-      childList: true,
-      subtree: true
-    };
-  }
-  (0, _react.useEffect)(function () {
-    var currentElement = ref.current;
-    var observer;
-    if (currentElement) {
-      observer = new MutationObserver(onChange);
-
-      // Start observing the DOM element for mutations
-      observer.observe(currentElement, options);
-    }
-
-    // Cleanup function to stop observing when the component unmounts
-    return function () {
-      if (observer) {
-        observer.disconnect();
-      }
-    };
-  }, [ref, onChange, options]);
+var defaultMutationObserverOption = {
+  attributes: true,
+  childList: true,
+  subtree: true
 };
@@ -113,4 +92,8 @@ var useInViewport = function useInViewport(target, options, config, props) {
   }
-  var attachObserver = (0, _react.useCallback)(function (_ref4) {
-    var observerRef = _ref4.observerRef;
+  (0, _react.useEffect)(function () {
+    var observerRef = observer.current;
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    observerRef = initIntersectionObserver({
+      observerRef: observerRef
+    });
     startObserver({
@@ -124,22 +107,28 @@ observerRef: observerRef
     };
-  }, []);
-  var handleMutation = (0, _react.useCallback)(function () {
-    var observerRef = observer.current;
-    attachObserver({
-      observerRef: observerRef
-    });
-  }, []);
+  }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+
+  // handles when ref changes
   (0, _react.useEffect)(function () {
+    var currentElement = target.current;
     var observerRef = observer.current;
-    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-    observerRef = initIntersectionObserver({
-      observerRef: observerRef
-    });
-    attachObserver({
-      observerRef: observerRef
-    });
-  }, [options, config, onEnterViewport, onLeaveViewport]);
+    var handleOnChange = function handleOnChange() {
+      startObserver({
+        observerRef: observerRef
+      });
+    };
+    var mutationObserver;
+    if (currentElement) {
+      mutationObserver = new MutationObserver(handleOnChange);
 
-  // handles when ref changes
-  useDOMObserver(target, handleMutation);
+      // Start observing the DOM element for mutations
+      mutationObserver.observe(currentElement, defaultMutationObserverOption);
+    }
+
+    // Cleanup function to stop observing when the component unmounts
+    return function () {
+      if (observer) {
+        mutationObserver.disconnect();
+      }
+    };
+  }, [target.current]);
   return {
@@ -146,0 +135,0 @@ inViewport: inViewportRef.current,

dist/next/lib/useInViewport.js

@@ -1,28 +0,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { defaultOptions, defaultConfig, defaultProps } from './constants';
-var useDOMObserver = function useDOMObserver(ref, onChange, options) {
-  if (options === void 0) {
-    options = {
-      attributes: true,
-      childList: true,
-      subtree: true
-    };
-  }
-  useEffect(function () {
-    var currentElement = ref.current;
-    var observer;
-    if (currentElement) {
-      observer = new MutationObserver(onChange);
-
-      // Start observing the DOM element for mutations
-      observer.observe(currentElement, options);
-    }
-
-    // Cleanup function to stop observing when the component unmounts
-    return function () {
-      if (observer) {
-        observer.disconnect();
-      }
-    };
-  }, [ref, onChange, options]);
+var defaultMutationObserverOption = {
+  attributes: true,
+  childList: true,
+  subtree: true
 };
@@ -108,4 +87,8 @@ var useInViewport = function useInViewport(target, options, config, props) {
   }
-  var attachObserver = useCallback(function (_ref4) {
-    var observerRef = _ref4.observerRef;
+  useEffect(function () {
+    var observerRef = observer.current;
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    observerRef = initIntersectionObserver({
+      observerRef: observerRef
+    });
     startObserver({
@@ -119,22 +102,28 @@ observerRef: observerRef
     };
-  }, []);
-  var handleMutation = useCallback(function () {
-    var observerRef = observer.current;
-    attachObserver({
-      observerRef: observerRef
-    });
-  }, []);
+  }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+
+  // handles when ref changes
   useEffect(function () {
+    var currentElement = target.current;
     var observerRef = observer.current;
-    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-    observerRef = initIntersectionObserver({
-      observerRef: observerRef
-    });
-    attachObserver({
-      observerRef: observerRef
-    });
-  }, [options, config, onEnterViewport, onLeaveViewport]);
+    var handleOnChange = function handleOnChange() {
+      startObserver({
+        observerRef: observerRef
+      });
+    };
+    var mutationObserver;
+    if (currentElement) {
+      mutationObserver = new MutationObserver(handleOnChange);
 
-  // handles when ref changes
-  useDOMObserver(target, handleMutation);
+      // Start observing the DOM element for mutations
+      mutationObserver.observe(currentElement, defaultMutationObserverOption);
+    }
+
+    // Cleanup function to stop observing when the component unmounts
+    return function () {
+      if (observer) {
+        mutationObserver.disconnect();
+      }
+    };
+  }, [target.current]);
   return {
@@ -141,0 +130,0 @@ inViewport: inViewportRef.current,

dist/types/lib/useInViewport.js

@@ -5,22 +5,6 @@ "use strict";
 const constants_1 = require("./constants");
-const useDOMObserver = (ref, onChange, options = {
+const defaultMutationObserverOption = {
     attributes: true,
     childList: true,
     subtree: true,
-}) => {
-    (0, react_1.useEffect)(() => {
-        const currentElement = ref.current;
-        let observer;
-        if (currentElement) {
-            observer = new MutationObserver(onChange);
-            // Start observing the DOM element for mutations
-            observer.observe(currentElement, options);
-        }
-        // Cleanup function to stop observing when the component unmounts
-        return () => {
-            if (observer) {
-                observer.disconnect();
-            }
-        };
-    }, [ref, onChange, options]);
 };
@@ -90,3 +74,6 @@ const useInViewport = (target, options = constants_1.defaultOptions, config = constants_1.defaultConfig, props = constants_1.defaultProps) => {
     }
-    const attachObserver = (0, react_1.useCallback)(({ observerRef }) => {
+    (0, react_1.useEffect)(() => {
+        let observerRef = observer.current;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+        observerRef = initIntersectionObserver({ observerRef });
         startObserver({
@@ -100,15 +87,25 @@ observerRef,
         };
-    }, []);
-    const handleMutation = (0, react_1.useCallback)(() => {
+    }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+    // handles when ref changes
+    (0, react_1.useEffect)(() => {
+        const currentElement = target.current;
         const observerRef = observer.current;
-        attachObserver({ observerRef });
-    }, []);
-    (0, react_1.useEffect)(() => {
-        let observerRef = observer.current;
-        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-        observerRef = initIntersectionObserver({ observerRef });
-        attachObserver({ observerRef });
-    }, [options, config, onEnterViewport, onLeaveViewport]);
-    // handles when ref changes
-    useDOMObserver(target, handleMutation);
+        const handleOnChange = () => {
+            startObserver({
+                observerRef,
+            });
+        };
+        let mutationObserver;
+        if (currentElement) {
+            mutationObserver = new MutationObserver(handleOnChange);
+            // Start observing the DOM element for mutations
+            mutationObserver.observe(currentElement, defaultMutationObserverOption);
+        }
+        // Cleanup function to stop observing when the component unmounts
+        return () => {
+            if (observer) {
+                mutationObserver.disconnect();
+            }
+        };
+    }, [target.current]);
     return {
@@ -115,0 +112,0 @@ inViewport: inViewportRef.current,

dist/umd/lib/useInViewport.js

@@ -18,27 +18,6 @@ (function (global, factory) {
   _exports["default"] = void 0;
-  var useDOMObserver = function useDOMObserver(ref, onChange, options) {
-    if (options === void 0) {
-      options = {
-        attributes: true,
-        childList: true,
-        subtree: true
-      };
-    }
-    (0, _react.useEffect)(function () {
-      var currentElement = ref.current;
-      var observer;
-      if (currentElement) {
-        observer = new MutationObserver(onChange);
-
-        // Start observing the DOM element for mutations
-        observer.observe(currentElement, options);
-      }
-
-      // Cleanup function to stop observing when the component unmounts
-      return function () {
-        if (observer) {
-          observer.disconnect();
-        }
-      };
-    }, [ref, onChange, options]);
+  var defaultMutationObserverOption = {
+    attributes: true,
+    childList: true,
+    subtree: true
   };
@@ -124,4 +103,8 @@ var useInViewport = function useInViewport(target, options, config, props) {
     }
-    var attachObserver = (0, _react.useCallback)(function (_ref4) {
-      var observerRef = _ref4.observerRef;
+    (0, _react.useEffect)(function () {
+      var observerRef = observer.current;
+      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+      observerRef = initIntersectionObserver({
+        observerRef: observerRef
+      });
       startObserver({
@@ -135,22 +118,28 @@ observerRef: observerRef
       };
-    }, []);
-    var handleMutation = (0, _react.useCallback)(function () {
-      var observerRef = observer.current;
-      attachObserver({
-        observerRef: observerRef
-      });
-    }, []);
+    }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+
+    // handles when ref changes
     (0, _react.useEffect)(function () {
+      var currentElement = target.current;
       var observerRef = observer.current;
-      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-      observerRef = initIntersectionObserver({
-        observerRef: observerRef
-      });
-      attachObserver({
-        observerRef: observerRef
-      });
-    }, [options, config, onEnterViewport, onLeaveViewport]);
+      var handleOnChange = function handleOnChange() {
+        startObserver({
+          observerRef: observerRef
+        });
+      };
+      var mutationObserver;
+      if (currentElement) {
+        mutationObserver = new MutationObserver(handleOnChange);
 
-    // handles when ref changes
-    useDOMObserver(target, handleMutation);
+        // Start observing the DOM element for mutations
+        mutationObserver.observe(currentElement, defaultMutationObserverOption);
+      }
+
+      // Cleanup function to stop observing when the component unmounts
+      return function () {
+        if (observer) {
+          mutationObserver.disconnect();
+        }
+      };
+    }, [target.current]);
     return {
@@ -157,0 +146,0 @@ inViewport: inViewportRef.current,

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

107505

decreased by-1.04%

Lines of code

1770

decreased by-2.69%

No dependency changes