react-intersection-observer - npm Package Compare versions

Comparing version 9.3.5 to 9.4.0

package.json

 {
   "name": "react-intersection-observer",
-  "version": "9.3.5",
+  "version": "9.4.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -5,0 +5,0 @@ "source": "./src/index.tsx",

react-intersection-observer.esm.js

@@ -410,2 +410,4 @@ import * as React from 'react';
 function useInView(_temp) {
+  var _state$entry;
+
   var _ref = _temp === void 0 ? {} : _temp,
@@ -423,61 +425,63 @@ threshold = _ref.threshold,
 
-  var unobserve = React.useRef();
+  var _React$useState = React.useState(null),
+      ref = _React$useState[0],
+      setRef = _React$useState[1];
+
   var callback = React.useRef();
 
-  var _React$useState = React.useState({
-    inView: !!initialInView
+  var _React$useState2 = React.useState({
+    inView: !!initialInView,
+    entry: undefined
   }),
-      state = _React$useState[0],
-      setState = _React$useState[1]; // Store the onChange callback in a `ref`, so we can access the latest instance inside the `useCallback`.
+      state = _React$useState2[0],
+      setState = _React$useState2[1]; // Store the onChange callback in a `ref`, so we can access the latest instance
+  // inside the `useEffect`, but without triggering a rerender.
 
 
   callback.current = onChange;
-  var setRef = React.useCallback(function (node) {
-    if (unobserve.current !== undefined) {
-      unobserve.current();
-      unobserve.current = undefined;
-    } // Skip creating the observer
+  React.useEffect(function () {
+    // Ensure we have node ref, and that we shouldn't skip observing
+    if (skip || !ref) return;
+    var unobserve = observe(ref, function (inView, entry) {
+      setState({
+        inView: inView,
+        entry: entry
+      });
+      if (callback.current) callback.current(inView, entry);
 
-
-    if (skip) return;
-
-    if (node) {
-      unobserve.current = observe(node, function (inView, entry) {
-        setState({
-          inView: inView,
-          entry: entry
-        });
-        if (callback.current) callback.current(inView, entry);
-
-        if (entry.isIntersecting && triggerOnce && unobserve.current) {
-          // If it should only trigger once, unobserve the element after it's inView
-          unobserve.current();
-          unobserve.current = undefined;
-        }
-      }, {
-        root: root,
-        rootMargin: rootMargin,
-        threshold: threshold,
-        // @ts-ignore
-        trackVisibility: trackVisibility,
-        // @ts-ignore
-        delay: delay
-      }, fallbackInView);
-    }
+      if (entry.isIntersecting && triggerOnce && unobserve) {
+        // If it should only trigger once, unobserve the element after it's inView
+        unobserve();
+        unobserve = undefined;
+      }
+    }, {
+      root: root,
+      rootMargin: rootMargin,
+      threshold: threshold,
+      // @ts-ignore
+      trackVisibility: trackVisibility,
+      // @ts-ignore
+      delay: delay
+    }, fallbackInView);
+    return function () {
+      if (unobserve) {
+        unobserve();
+      }
+    };
   }, // We break the rule here, because we aren't including the actual `threshold` variable
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [// If the threshold is an array, convert it to a string so it won't change between renders.
+  [// If the threshold is an array, convert it to a string, so it won't change between renders.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
-  /* eslint-disable-next-line */
-
+  Array.isArray(threshold) ? threshold.toString() : threshold, ref, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
+  var entryTarget = (_state$entry = state.entry) == null ? void 0 : _state$entry.target;
   React.useEffect(function () {
-    if (!unobserve.current && state.entry && !triggerOnce && !skip) {
-      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
+    if (!ref && entryTarget && !triggerOnce && !skip) {
+      // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
       // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
       setState({
-        inView: !!initialInView
+        inView: !!initialInView,
+        entry: undefined
       });
     }
-  });
+  }, [ref, entryTarget, triggerOnce, skip, initialInView]);
   var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.
@@ -484,0 +488,0 @@

react-intersection-observer.js

@@ -430,2 +430,4 @@ var React = require('react');
 function useInView(_temp) {
+  var _state$entry;
+
   var _ref = _temp === void 0 ? {} : _temp,
@@ -443,61 +445,63 @@ threshold = _ref.threshold,
 
-  var unobserve = React__namespace.useRef();
+  var _React$useState = React__namespace.useState(null),
+      ref = _React$useState[0],
+      setRef = _React$useState[1];
+
   var callback = React__namespace.useRef();
 
-  var _React$useState = React__namespace.useState({
-    inView: !!initialInView
+  var _React$useState2 = React__namespace.useState({
+    inView: !!initialInView,
+    entry: undefined
   }),
-      state = _React$useState[0],
-      setState = _React$useState[1]; // Store the onChange callback in a `ref`, so we can access the latest instance inside the `useCallback`.
+      state = _React$useState2[0],
+      setState = _React$useState2[1]; // Store the onChange callback in a `ref`, so we can access the latest instance
+  // inside the `useEffect`, but without triggering a rerender.
 
 
   callback.current = onChange;
-  var setRef = React__namespace.useCallback(function (node) {
-    if (unobserve.current !== undefined) {
-      unobserve.current();
-      unobserve.current = undefined;
-    } // Skip creating the observer
+  React__namespace.useEffect(function () {
+    // Ensure we have node ref, and that we shouldn't skip observing
+    if (skip || !ref) return;
+    var unobserve = observe(ref, function (inView, entry) {
+      setState({
+        inView: inView,
+        entry: entry
+      });
+      if (callback.current) callback.current(inView, entry);
 
-
-    if (skip) return;
-
-    if (node) {
-      unobserve.current = observe(node, function (inView, entry) {
-        setState({
-          inView: inView,
-          entry: entry
-        });
-        if (callback.current) callback.current(inView, entry);
-
-        if (entry.isIntersecting && triggerOnce && unobserve.current) {
-          // If it should only trigger once, unobserve the element after it's inView
-          unobserve.current();
-          unobserve.current = undefined;
-        }
-      }, {
-        root: root,
-        rootMargin: rootMargin,
-        threshold: threshold,
-        // @ts-ignore
-        trackVisibility: trackVisibility,
-        // @ts-ignore
-        delay: delay
-      }, fallbackInView);
-    }
+      if (entry.isIntersecting && triggerOnce && unobserve) {
+        // If it should only trigger once, unobserve the element after it's inView
+        unobserve();
+        unobserve = undefined;
+      }
+    }, {
+      root: root,
+      rootMargin: rootMargin,
+      threshold: threshold,
+      // @ts-ignore
+      trackVisibility: trackVisibility,
+      // @ts-ignore
+      delay: delay
+    }, fallbackInView);
+    return function () {
+      if (unobserve) {
+        unobserve();
+      }
+    };
   }, // We break the rule here, because we aren't including the actual `threshold` variable
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [// If the threshold is an array, convert it to a string so it won't change between renders.
+  [// If the threshold is an array, convert it to a string, so it won't change between renders.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
-  /* eslint-disable-next-line */
-
+  Array.isArray(threshold) ? threshold.toString() : threshold, ref, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
+  var entryTarget = (_state$entry = state.entry) == null ? void 0 : _state$entry.target;
   React__namespace.useEffect(function () {
-    if (!unobserve.current && state.entry && !triggerOnce && !skip) {
-      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
+    if (!ref && entryTarget && !triggerOnce && !skip) {
+      // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
       // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
       setState({
-        inView: !!initialInView
+        inView: !!initialInView,
+        entry: undefined
       });
     }
-  });
+  }, [ref, entryTarget, triggerOnce, skip, initialInView]);
   var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.
@@ -504,0 +508,0 @@

react-intersection-observer.umd.js

@@ -433,2 +433,4 @@ (function (global, factory) {
   function useInView(_temp) {
+    var _state$entry;
+
     var _ref = _temp === void 0 ? {} : _temp,
@@ -446,61 +448,63 @@ threshold = _ref.threshold,
 
-    var unobserve = React__namespace.useRef();
+    var _React$useState = React__namespace.useState(null),
+        ref = _React$useState[0],
+        setRef = _React$useState[1];
+
     var callback = React__namespace.useRef();
 
-    var _React$useState = React__namespace.useState({
-      inView: !!initialInView
+    var _React$useState2 = React__namespace.useState({
+      inView: !!initialInView,
+      entry: undefined
     }),
-        state = _React$useState[0],
-        setState = _React$useState[1]; // Store the onChange callback in a `ref`, so we can access the latest instance inside the `useCallback`.
+        state = _React$useState2[0],
+        setState = _React$useState2[1]; // Store the onChange callback in a `ref`, so we can access the latest instance
+    // inside the `useEffect`, but without triggering a rerender.
 
 
     callback.current = onChange;
-    var setRef = React__namespace.useCallback(function (node) {
-      if (unobserve.current !== undefined) {
-        unobserve.current();
-        unobserve.current = undefined;
-      } // Skip creating the observer
+    React__namespace.useEffect(function () {
+      // Ensure we have node ref, and that we shouldn't skip observing
+      if (skip || !ref) return;
+      var unobserve = observe(ref, function (inView, entry) {
+        setState({
+          inView: inView,
+          entry: entry
+        });
+        if (callback.current) callback.current(inView, entry);
 
-
-      if (skip) return;
-
-      if (node) {
-        unobserve.current = observe(node, function (inView, entry) {
-          setState({
-            inView: inView,
-            entry: entry
-          });
-          if (callback.current) callback.current(inView, entry);
-
-          if (entry.isIntersecting && triggerOnce && unobserve.current) {
-            // If it should only trigger once, unobserve the element after it's inView
-            unobserve.current();
-            unobserve.current = undefined;
-          }
-        }, {
-          root: root,
-          rootMargin: rootMargin,
-          threshold: threshold,
-          // @ts-ignore
-          trackVisibility: trackVisibility,
-          // @ts-ignore
-          delay: delay
-        }, fallbackInView);
-      }
+        if (entry.isIntersecting && triggerOnce && unobserve) {
+          // If it should only trigger once, unobserve the element after it's inView
+          unobserve();
+          unobserve = undefined;
+        }
+      }, {
+        root: root,
+        rootMargin: rootMargin,
+        threshold: threshold,
+        // @ts-ignore
+        trackVisibility: trackVisibility,
+        // @ts-ignore
+        delay: delay
+      }, fallbackInView);
+      return function () {
+        if (unobserve) {
+          unobserve();
+        }
+      };
     }, // We break the rule here, because we aren't including the actual `threshold` variable
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [// If the threshold is an array, convert it to a string so it won't change between renders.
+    [// If the threshold is an array, convert it to a string, so it won't change between renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    Array.isArray(threshold) ? threshold.toString() : threshold, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
-    /* eslint-disable-next-line */
-
+    Array.isArray(threshold) ? threshold.toString() : threshold, ref, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);
+    var entryTarget = (_state$entry = state.entry) == null ? void 0 : _state$entry.target;
     React__namespace.useEffect(function () {
-      if (!unobserve.current && state.entry && !triggerOnce && !skip) {
-        // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
+      if (!ref && entryTarget && !triggerOnce && !skip) {
+        // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
         // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
         setState({
-          inView: !!initialInView
+          inView: !!initialInView,
+          entry: undefined
         });
       }
-    });
+    }, [ref, entryTarget, triggerOnce, skip, initialInView]);
     var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.
@@ -507,0 +511,0 @@

README.md

@@ -138,3 +138,4 @@ # react-intersection-observer
 
-> ⚠️ When rendering a plain child, make sure you keep your HTML output semantic.
+> **Note**<br>
+> When rendering a plain child, make sure you keep your HTML output semantic.
 > Change the `as` to match the context, and add a `className` to style the
@@ -168,5 +169,5 @@ > `<InView />`. The component does not support Ref Forwarding, so if you need a
 
-| Name         | Type                                                 | Default     | Description                                                                                                                                                                                                                                                                                                                   |
-| ------------ | ---------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **as**       | `string`                                             | `'div'`     | Render the wrapping element as this element. Defaults to `div`.                                                                                                                                                                                                                                                               |
+| Name         | Type                                                 | Default     | Description                                                                                                                                                                                                                                                                                                                    |
+| ------------ | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **as**       | `string`                                             | `'div'`     | Render the wrapping element as this element. Defaults to `div`.                                                                                                                                                                                                                                                                |
 | **children** | `({ref, inView, entry}) => ReactNode` or `ReactNode` | `undefined` | Children expects a function that receives an object containing the `inView` boolean and a `ref` that should be assigned to the element root. Alternatively pass a plain child, to have the `<InView />` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry`, giving you more details. |
@@ -222,5 +223,5 @@
   const ref = useRef();
-  const [inViewRef, inView] = useInView();
+  const { ref: inViewRef, inView } = useInView();
 
-  // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop
+  // Use `useCallback` so we don't recreate the function on each render
   const setRefs = useCallback(
@@ -305,4 +306,4 @@ (node) => {
 
-> ⚠️ You only need to do this if the test environment does not support
-> `beforeEach` globally, alongside either `jest.fn` or `vi.fn`.
+You only need to do this if the test environment does not support
+`beforeEach` globally, alongside either `jest.fn` or `vi.fn`.
 
@@ -506,3 +507,4 @@ #### Other Testing Libraries
 
-> ⚠️ You most likely won't need this, but it can be useful if you need to handle
+> **Warning**<br>
+> You most likely won't need this, but it can be useful if you need to handle
 > IntersectionObservers outside React, or need full control over how instances
@@ -509,0 +511,0 @@ > are created.

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

Improved metrics

Total package byte prevSize

214128

increased by0.9%

Lines of code

2055

increased by1.08%

Number of lines in readme file

525

increased by0.38%

No dependency changes