react-intersection-observer-hook - npm Package Compare versions

Comparing version 1.0.5 to 2.0.1

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useTrackVisibility } from './useTrackVisibility';
+export { default as useIntersectionObserver, IntersectionObserverHookArgs, IntersectionObserverHookRefCallback, IntersectionObserverHookRefCallbackNode, IntersectionObserverHookResult, IntersectionObserverHookRootRefCallback, IntersectionObserverHookRootRefCallbackNode, } from './useIntersectionObserver';
+export { default as useTrackVisibility, TrackVisibilityHookArgs, TrackVisibilityHookResult, } from './useTrackVisibility';

dist/react-intersection-observer-hook.cjs.development.js

@@ -7,3 +7,2 @@ 'use strict';
 
-var DEFAULT_ROOT = null;
 var DEFAULT_ROOT_MARGIN = '0px';
@@ -14,11 +13,9 @@ var DEFAULT_THRESHOLD = [0]; // For more info:
 
-function useIntersectionObserver(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$root = _ref.root,
-      root = _ref$root === void 0 ? DEFAULT_ROOT : _ref$root,
-      _ref$rootMargin = _ref.rootMargin,
-      rootMargin = _ref$rootMargin === void 0 ? DEFAULT_ROOT_MARGIN : _ref$rootMargin,
-      _ref$threshold = _ref.threshold,
-      threshold = _ref$threshold === void 0 ? DEFAULT_THRESHOLD : _ref$threshold;
+function useIntersectionObserver(args) {
+  var _args$rootMargin, _args$threshold;
 
+  var rootMargin = (_args$rootMargin = args == null ? void 0 : args.rootMargin) != null ? _args$rootMargin : DEFAULT_ROOT_MARGIN;
+  var threshold = (_args$threshold = args == null ? void 0 : args.threshold) != null ? _args$threshold : DEFAULT_THRESHOLD;
+  var nodeRef = react.useRef(null);
+  var rootRef = react.useRef(null);
   var observerRef = react.useRef(null);
@@ -30,50 +27,91 @@
 
+  var unobserve = react.useCallback(function () {
+    // Disconnect the current observer (if there is one)
+    var currentObserver = observerRef.current;
+    currentObserver == null ? void 0 : currentObserver.disconnect();
+    observerRef.current = null;
+  }, []);
   react.useEffect(function () {
     return function () {
-      var observer = observerRef.current;
-
-      if (observer) {
-        observer.disconnect();
-      }
+      // We disconnect the observer on unmount to prevent memory leaks etc.
+      unobserve();
     };
-  }, []);
-  var refCallback = react.useCallback(function (node) {
-    function getObserver() {
-      // If there is no observer, then create it.
-      // So, we only create it only once.
-      if (!observerRef.current) {
-        observerRef.current = new IntersectionObserver(function (_ref2) {
-          var entry = _ref2[0];
-          setEntry(entry);
-        }, {
-          root: root,
-          rootMargin: rootMargin,
-          threshold: threshold
-        });
-      }
+  }, [unobserve]);
+  var observe = react.useCallback(function () {
+    var node = nodeRef.current;
 
-      return observerRef.current;
-    }
+    if (node) {
+      var root = rootRef.current;
+      var options = {
+        root: root,
+        rootMargin: rootMargin,
+        threshold: threshold
+      }; // Create a observer for current "node" with given options.
 
-    var observer = getObserver();
-    observer.disconnect();
-
-    if (node) {
+      var observer = new IntersectionObserver(function (_ref) {
+        var newEntry = _ref[0];
+        setEntry(newEntry);
+      }, options);
       observer.observe(node);
+      observerRef.current = observer;
     }
-  }, [root, rootMargin, threshold]);
+  }, [rootMargin, threshold]);
+  var initializeObserver = react.useCallback(function () {
+    unobserve();
+    observe();
+  }, [observe, unobserve]);
+  var refCallback = react.useCallback(function (node) {
+    nodeRef.current = node;
+    initializeObserver();
+  }, [initializeObserver]);
+  var rootRefCallback = react.useCallback(function (rootNode) {
+    rootRef.current = rootNode;
+    initializeObserver();
+  }, [initializeObserver]);
   return [refCallback, {
-    entry: entry
+    entry: entry,
+    rootRef: rootRefCallback
   }];
 }
 
-function useTrackVisibility(props) {
-  var _useIntersectionObser = useIntersectionObserver(props),
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function useTrackVisibility(args) {
+  var _result$entry;
+
+  var _useIntersectionObser = useIntersectionObserver(args),
       ref = _useIntersectionObser[0],
-      entry = _useIntersectionObser[1].entry;
+      result = _useIntersectionObser[1];
 
-  var isVisible = Boolean(entry && entry.isIntersecting);
-  return [ref, {
-    isVisible: isVisible
-  }];
+  var isVisible = Boolean((_result$entry = result.entry) == null ? void 0 : _result$entry.isIntersecting);
+
+  var _useState = react.useState(isVisible),
+      wasEverVisible = _useState[0],
+      setWasEverVisible = _useState[1];
+
+  react.useEffect(function () {
+    if (isVisible) {
+      setWasEverVisible(isVisible);
+    }
+  }, [isVisible]);
+  return [ref, _extends({}, result, {
+    isVisible: isVisible,
+    wasEverVisible: wasEverVisible
+  })];
 }
@@ -80,0 +118,0 @@

dist/react-intersection-observer-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=[0];function t(t){var n=void 0===t?{}:t,o=n.root,i=void 0===o?null:o,s=n.rootMargin,u=void 0===s?"0px":s,c=n.threshold,a=void 0===c?r:c,l=e.useRef(null),v=e.useState(),d=v[0],f=v[1];return e.useEffect((function(){return function(){var e=l.current;e&&e.disconnect()}}),[]),[e.useCallback((function(e){var r=(l.current||(l.current=new IntersectionObserver((function(e){f(e[0])}),{root:i,rootMargin:u,threshold:a})),l.current);r.disconnect(),e&&r.observe(e)}),[i,u,a]),{entry:d}]}exports.useIntersectionObserver=t,exports.useTrackVisibility=function(e){var r=t(e),n=r[1].entry;return[r[0],{isVisible:Boolean(n&&n.isIntersecting)}]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=[0];function n(n){var t,u,l=null!=(t=null==n?void 0:n.rootMargin)?t:"0px",o=null!=(u=null==n?void 0:n.threshold)?u:r,c=e.useRef(null),i=e.useRef(null),s=e.useRef(null),a=e.useState(),f=a[0],v=a[1],b=e.useCallback((function(){var e=s.current;null==e||e.disconnect(),s.current=null}),[]);e.useEffect((function(){return function(){b()}}),[b]);var p=e.useCallback((function(){var e=c.current;if(e){var r=new IntersectionObserver((function(e){v(e[0])}),{root:i.current,rootMargin:l,threshold:o});r.observe(e),s.current=r}}),[l,o]),d=e.useCallback((function(){b(),p()}),[p,b]);return[e.useCallback((function(e){c.current=e,d()}),[d]),{entry:f,rootRef:e.useCallback((function(e){i.current=e,d()}),[d])}]}function t(){return(t=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}exports.useIntersectionObserver=n,exports.useTrackVisibility=function(r){var u,l=n(r),o=l[0],c=l[1],i=Boolean(null==(u=c.entry)?void 0:u.isIntersecting),s=e.useState(i),a=s[0],f=s[1];return e.useEffect((function(){i&&f(i)}),[i]),[o,t({},c,{isVisible:i,wasEverVisible:a})]};
 //# sourceMappingURL=react-intersection-observer-hook.cjs.production.min.js.map

dist/react-intersection-observer-hook.esm.js

@@ -1,4 +0,3 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 
-var DEFAULT_ROOT = null;
 var DEFAULT_ROOT_MARGIN = '0px';
@@ -9,11 +8,9 @@ var DEFAULT_THRESHOLD = [0]; // For more info:
 
-function useIntersectionObserver(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$root = _ref.root,
-      root = _ref$root === void 0 ? DEFAULT_ROOT : _ref$root,
-      _ref$rootMargin = _ref.rootMargin,
-      rootMargin = _ref$rootMargin === void 0 ? DEFAULT_ROOT_MARGIN : _ref$rootMargin,
-      _ref$threshold = _ref.threshold,
-      threshold = _ref$threshold === void 0 ? DEFAULT_THRESHOLD : _ref$threshold;
+function useIntersectionObserver(args) {
+  var _args$rootMargin, _args$threshold;
 
+  var rootMargin = (_args$rootMargin = args == null ? void 0 : args.rootMargin) != null ? _args$rootMargin : DEFAULT_ROOT_MARGIN;
+  var threshold = (_args$threshold = args == null ? void 0 : args.threshold) != null ? _args$threshold : DEFAULT_THRESHOLD;
+  var nodeRef = useRef(null);
+  var rootRef = useRef(null);
   var observerRef = useRef(null);
@@ -25,50 +22,91 @@
 
+  var unobserve = useCallback(function () {
+    // Disconnect the current observer (if there is one)
+    var currentObserver = observerRef.current;
+    currentObserver == null ? void 0 : currentObserver.disconnect();
+    observerRef.current = null;
+  }, []);
   useEffect(function () {
     return function () {
-      var observer = observerRef.current;
-
-      if (observer) {
-        observer.disconnect();
-      }
+      // We disconnect the observer on unmount to prevent memory leaks etc.
+      unobserve();
     };
-  }, []);
-  var refCallback = useCallback(function (node) {
-    function getObserver() {
-      // If there is no observer, then create it.
-      // So, we only create it only once.
-      if (!observerRef.current) {
-        observerRef.current = new IntersectionObserver(function (_ref2) {
-          var entry = _ref2[0];
-          setEntry(entry);
-        }, {
-          root: root,
-          rootMargin: rootMargin,
-          threshold: threshold
-        });
-      }
+  }, [unobserve]);
+  var observe = useCallback(function () {
+    var node = nodeRef.current;
 
-      return observerRef.current;
-    }
+    if (node) {
+      var root = rootRef.current;
+      var options = {
+        root: root,
+        rootMargin: rootMargin,
+        threshold: threshold
+      }; // Create a observer for current "node" with given options.
 
-    var observer = getObserver();
-    observer.disconnect();
-
-    if (node) {
+      var observer = new IntersectionObserver(function (_ref) {
+        var newEntry = _ref[0];
+        setEntry(newEntry);
+      }, options);
       observer.observe(node);
+      observerRef.current = observer;
     }
-  }, [root, rootMargin, threshold]);
+  }, [rootMargin, threshold]);
+  var initializeObserver = useCallback(function () {
+    unobserve();
+    observe();
+  }, [observe, unobserve]);
+  var refCallback = useCallback(function (node) {
+    nodeRef.current = node;
+    initializeObserver();
+  }, [initializeObserver]);
+  var rootRefCallback = useCallback(function (rootNode) {
+    rootRef.current = rootNode;
+    initializeObserver();
+  }, [initializeObserver]);
   return [refCallback, {
-    entry: entry
+    entry: entry,
+    rootRef: rootRefCallback
   }];
 }
 
-function useTrackVisibility(props) {
-  var _useIntersectionObser = useIntersectionObserver(props),
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function useTrackVisibility(args) {
+  var _result$entry;
+
+  var _useIntersectionObser = useIntersectionObserver(args),
       ref = _useIntersectionObser[0],
-      entry = _useIntersectionObser[1].entry;
+      result = _useIntersectionObser[1];
 
-  var isVisible = Boolean(entry && entry.isIntersecting);
-  return [ref, {
-    isVisible: isVisible
-  }];
+  var isVisible = Boolean((_result$entry = result.entry) == null ? void 0 : _result$entry.isIntersecting);
+
+  var _useState = useState(isVisible),
+      wasEverVisible = _useState[0],
+      setWasEverVisible = _useState[1];
+
+  useEffect(function () {
+    if (isVisible) {
+      setWasEverVisible(isVisible);
+    }
+  }, [isVisible]);
+  return [ref, _extends({}, result, {
+    isVisible: isVisible,
+    wasEverVisible: wasEverVisible
+  })];
 }
@@ -75,0 +113,0 @@

dist/useIntersectionObserver.d.ts

@@ -0,7 +1,11 @@
+export declare type IntersectionObserverHookArgs = IntersectionObserverInit;
 export declare type IntersectionObserverHookRefCallbackNode = Element | null;
 export declare type IntersectionObserverHookRefCallback = (node: IntersectionObserverHookRefCallbackNode) => void;
+export declare type IntersectionObserverHookRootRefCallbackNode = IntersectionObserverHookArgs['root'];
+export declare type IntersectionObserverHookRootRefCallback = (node: IntersectionObserverHookRootRefCallbackNode) => void;
 export declare type IntersectionObserverHookResult = [IntersectionObserverHookRefCallback, {
     entry: IntersectionObserverEntry | undefined;
+    rootRef?: IntersectionObserverHookRootRefCallback;
 }];
-declare function useIntersectionObserver({ root, rootMargin, threshold, }?: IntersectionObserverInit): IntersectionObserverHookResult;
+declare function useIntersectionObserver(args?: IntersectionObserverHookArgs): IntersectionObserverHookResult;
 export default useIntersectionObserver;

dist/useTrackVisibility.d.ts

@@ -1,6 +0,8 @@
-import { IntersectionObserverHookRefCallback } from './useIntersectionObserver';
-export declare type TrackVisibilityResult = [IntersectionObserverHookRefCallback, {
+import { IntersectionObserverHookArgs, IntersectionObserverHookResult } from './useIntersectionObserver';
+export declare type TrackVisibilityHookArgs = IntersectionObserverHookArgs;
+export declare type TrackVisibilityHookResult = [IntersectionObserverHookResult[0], IntersectionObserverHookResult[1] & {
     isVisible: boolean;
+    wasEverVisible: boolean;
 }];
-declare function useTrackVisibility(props?: IntersectionObserverInit): TrackVisibilityResult;
+declare function useTrackVisibility(args?: IntersectionObserverHookArgs): TrackVisibilityHookResult;
 export default useTrackVisibility;

package.json

 {
   "name": "react-intersection-observer-hook",
-  "version": "1.0.5",
+  "version": "2.0.1",
   "license": "MIT",
@@ -43,8 +43,2 @@ "author": "onderonur",
   },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
   "devDependencies": {
@@ -54,3 +48,14 @@ "@types/jest": "^26.0.22",
     "@types/react-dom": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "eslint": "^7.23.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
+    "prettier": "^2.2.1",
     "react": "^17.0.2",
@@ -57,0 +62,0 @@ "react-dom": "^17.0.2",

README.md

@@ -29,2 +29,5 @@ # react-intersection-observer-hook
 function Example() {
+  // `useIntersectionObserver` returns a tuple.
+  // We need to give this `ref` callback to the node we want to observe.
+  // The second item, `entry` is the response of the initially created `IntersectionObserver` instance.
   const [ref, { entry }] = useIntersectionObserver();
@@ -43,4 +46,30 @@ const isVisible = entry && entry.isIntersecting;
 
-or if you just want to track visibility, you can use `useTrackVisibility` hook like this;
+if you have a scrollable container, you can set a `root` like this:
+```javascript
+import React, { useEffect } from 'react';
+import { useIntersectionObserver } from 'react-intersection-observer-hook';
+// ...
 
+function Example() {
+  const [ref, { entry, rootRef }] = useIntersectionObserver();
+  const isVisible = entry && entry.isIntersecting;
+  
+  useEffect(() => {
+    console.log(`The component is ${isVisible ? "visible" : "not visible"}.`)
+  },[isVisible])
+
+  return (
+    <ScrollableContainer 
+      // We use `rootRef` callback to set our root node.
+      ref={rootRef} 
+    >
+      <SomeComponentToTrack ref={ref} />
+    </ScrollableContainer>
+  );
+};
+```
+
+If you just want to track visibility, you can use `useTrackVisibility` hook.
+It has the same API as `useIntersectionObserver` hook. It just returns a different result.
+
 ```javascript
@@ -52,3 +81,8 @@ import React, { useEffect } from 'react';
 function Example() {
-  const [ref, { isVisible }] = useTrackVisibility();
+  // `useTrackVisibility` also returns a tuple like `useIntersectionObserver`.
+  // First item is the same `ref` callback to set the node to observe.
+  // Second item is an object that we can use to decide if a node is visible.
+  // `isVisible`: Becomes true/false based on the response of `IntersectionObserver`.
+  // `wasEverVisible`: When our observed node becomes visible once, this flag becomes `true` and stays like that.
+  const [ref, { isVisible, wasEverVisible }] = useTrackVisibility();
   
@@ -65,7 +99,6 @@ useEffect(() => {
 
-## Props
+## Arguments
 
-Both `useIntersectionObserver` and `useTrackVisibility` gets the same props. And those are;
+Both `useIntersectionObserver` and `useTrackVisibility` gets the same arguments. And those are;
 
-- **root:** The viewport element to check the visibility of the given target with the ref callback. The default value is the browser viewport.
 - **rootMargin:** Indicates the margin value around the root element. Default value is zero for all directions (top, right, bottom and left).
@@ -72,0 +105,0 @@ - **threshold:** Threshold value (or values) to trigger the observer.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

37616

increased by53.52%

Number of package files

14

increased by7.69%

Lines of code

229

increased by48.7%

Number of lines in readme file

104

increased by46.48%

Worsened metrics

Dev dependency count

21

increased by110%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes