react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-alpha.13 to 1.0.0-alpha.14

dist/es/lib/useInViewport.js

@@ -22,7 +22,8 @@ "use strict";
   } = props;
-  var [inViewport, setInViewport] = (0, _react.useState)(false);
-  var [enterCount, setEnterCount] = (0, _react.useState)(0);
-  var [leaveCount, setLeaveCount] = (0, _react.useState)(0);
+  var [, forceUpdate] = (0, _react.useState)();
   var observer = (0, _react.useRef)();
+  var inViewportRef = (0, _react.useRef)(false);
   var intersected = (0, _react.useRef)(false);
+  var enterCountRef = (0, _react.useRef)(0);
+  var leaveCountRef = (0, _react.useRef)(0);
 
@@ -62,4 +63,5 @@ function startObserver() {
       onEnterViewport && onEnterViewport();
-      setInViewport(isInViewport);
-      setEnterCount(enterCount + 1);
+      enterCountRef.current += 1;
+      inViewportRef.current = isInViewport;
+      forceUpdate(isInViewport);
       return;
@@ -78,4 +80,5 @@ } // leave
 
-      setInViewport(isInViewport);
-      setLeaveCount(leaveCount + 1);
+      leaveCountRef.current += 1;
+      inViewportRef.current = isInViewport;
+      forceUpdate(isInViewport);
     }
@@ -100,5 +103,5 @@ }
   return {
-    inViewport,
-    enterCount,
-    leaveCount
+    inViewport: inViewportRef.current,
+    enterCount: enterCountRef.current,
+    leaveCount: leaveCountRef.current
   };
@@ -105,0 +108,0 @@ };

dist/lib/useInViewport.js

@@ -21,16 +21,10 @@ "use strict";
 
-  var _useState = (0, _react.useState)(false),
-      inViewport = _useState[0],
-      setInViewport = _useState[1];
+  var _useState = (0, _react.useState)(),
+      forceUpdate = _useState[1];
 
-  var _useState2 = (0, _react.useState)(0),
-      enterCount = _useState2[0],
-      setEnterCount = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      leaveCount = _useState3[0],
-      setLeaveCount = _useState3[1];
-
   var observer = (0, _react.useRef)();
+  var inViewportRef = (0, _react.useRef)(false);
   var intersected = (0, _react.useRef)(false);
+  var enterCountRef = (0, _react.useRef)(0);
+  var leaveCountRef = (0, _react.useRef)(0);
 
@@ -68,4 +62,5 @@ function startObserver() {
       onEnterViewport && onEnterViewport();
-      setInViewport(isInViewport);
-      setEnterCount(enterCount + 1);
+      enterCountRef.current += 1;
+      inViewportRef.current = isInViewport;
+      forceUpdate(isInViewport);
       return;
@@ -84,4 +79,5 @@ } // leave
 
-      setInViewport(isInViewport);
-      setLeaveCount(leaveCount + 1);
+      leaveCountRef.current += 1;
+      inViewportRef.current = isInViewport;
+      forceUpdate(isInViewport);
     }
@@ -106,5 +102,5 @@ }
   return {
-    inViewport: inViewport,
-    enterCount: enterCount,
-    leaveCount: leaveCount
+    inViewport: inViewportRef.current,
+    enterCount: enterCountRef.current,
+    leaveCount: leaveCountRef.current
   };
@@ -111,0 +107,0 @@ };

dist/next/lib/useInViewport.js

@@ -15,16 +15,10 @@ // React hooks
 
-  var _useState = useState(false),
-      inViewport = _useState[0],
-      setInViewport = _useState[1];
+  var _useState = useState(),
+      forceUpdate = _useState[1];
 
-  var _useState2 = useState(0),
-      enterCount = _useState2[0],
-      setEnterCount = _useState2[1];
-
-  var _useState3 = useState(0),
-      leaveCount = _useState3[0],
-      setLeaveCount = _useState3[1];
-
   var observer = useRef();
+  var inViewportRef = useRef(false);
   var intersected = useRef(false);
+  var enterCountRef = useRef(0);
+  var leaveCountRef = useRef(0);
 
@@ -62,4 +56,5 @@ function startObserver() {
       onEnterViewport && onEnterViewport();
-      setInViewport(isInViewport);
-      setEnterCount(enterCount + 1);
+      enterCountRef.current += 1;
+      inViewportRef.current = isInViewport;
+      forceUpdate(isInViewport);
       return;
@@ -78,4 +73,5 @@ } // leave
 
-      setInViewport(isInViewport);
-      setLeaveCount(leaveCount + 1);
+      leaveCountRef.current += 1;
+      inViewportRef.current = isInViewport;
+      forceUpdate(isInViewport);
     }
@@ -100,5 +96,5 @@ }
   return {
-    inViewport: inViewport,
-    enterCount: enterCount,
-    leaveCount: leaveCount
+    inViewport: inViewportRef.current,
+    enterCount: enterCountRef.current,
+    leaveCount: leaveCountRef.current
   };
@@ -105,0 +101,0 @@ };

dist/stories/chapters/lazyMedia.js

@@ -26,5 +26,2 @@ "use strict";
         var imageArray = [{
-          src: 'https://i0.wp.com/peopledotcom.files.wordpress.com/2016/08/gettyimages-175928870.jpg',
-          ratio: '595/397'
-        }, {
           src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',
@@ -83,5 +80,2 @@ ratio: '508/397'
         var imageArray = [{
-          src: 'https://i0.wp.com/peopledotcom.files.wordpress.com/2016/08/gettyimages-175928870.jpg',
-          ratio: '595/397'
-        }, {
           src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',
@@ -88,0 +82,0 @@ ratio: '508/397'

dist/umd/lib/useInViewport.js

@@ -30,16 +30,10 @@ (function (global, factory) {
 
-    var _useState = (0, _react.useState)(false),
-        inViewport = _useState[0],
-        setInViewport = _useState[1];
+    var _useState = (0, _react.useState)(),
+        forceUpdate = _useState[1];
 
-    var _useState2 = (0, _react.useState)(0),
-        enterCount = _useState2[0],
-        setEnterCount = _useState2[1];
-
-    var _useState3 = (0, _react.useState)(0),
-        leaveCount = _useState3[0],
-        setLeaveCount = _useState3[1];
-
     var observer = (0, _react.useRef)();
+    var inViewportRef = (0, _react.useRef)(false);
     var intersected = (0, _react.useRef)(false);
+    var enterCountRef = (0, _react.useRef)(0);
+    var leaveCountRef = (0, _react.useRef)(0);
 
@@ -77,4 +71,5 @@ function startObserver() {
         onEnterViewport && onEnterViewport();
-        setInViewport(isInViewport);
-        setEnterCount(enterCount + 1);
+        enterCountRef.current += 1;
+        inViewportRef.current = isInViewport;
+        forceUpdate(isInViewport);
         return;
@@ -93,4 +88,5 @@ } // leave
 
-        setInViewport(isInViewport);
-        setLeaveCount(leaveCount + 1);
+        leaveCountRef.current += 1;
+        inViewportRef.current = isInViewport;
+        forceUpdate(isInViewport);
       }
@@ -115,5 +111,5 @@ }
     return {
-      inViewport: inViewport,
-      enterCount: enterCount,
-      leaveCount: leaveCount
+      inViewport: inViewportRef.current,
+      enterCount: enterCountRef.current,
+      leaveCount: leaveCountRef.current
     };
@@ -120,0 +116,0 @@ };

package.json

 {
   "name": "react-in-viewport",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "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

79523

decreased by-0.28%

Lines of code

1341

decreased by-0.67%

No dependency changes