react-scroll-percentage - npm Package Compare versions

Comparing version 4.0.3 to 4.0.4

package.json

 {
   "name": "react-scroll-percentage",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.",
@@ -30,2 +30,2 @@ "main": "react-scroll-percentage.cjs.js",
   }
-}
+}

react-scroll-percentage.cjs.js

@@ -189,2 +189,3 @@ 'use strict';
  */
+
 function useScrollPercentage(options) {
@@ -200,4 +201,2 @@ if (options === void 0) {
 
-  var target = entry && entry.target;
-
   var _useState = React.useState(0),
@@ -207,10 +206,12 @@ percentage = _useState[0],
 
-  var handleScroll = React.useCallback(function () {
-    if (!target) return;
-    var bounds = target.getBoundingClientRect();
-    var percentage = options.horizontal ? calculateHorizontalPercentage(bounds, options.threshold, options.root) : calculateVerticalPercentage(bounds, options.threshold, options.root);
-    setPercentage(percentage);
-  }, [target, options.threshold, options.root, options.horizontal]);
+  var target = entry && entry.target;
   React.useEffect(function () {
     if (inView) {
+      var handleScroll = function handleScroll() {
+        if (!target) return;
+        var bounds = target.getBoundingClientRect();
+        var percentage = options.horizontal ? calculateHorizontalPercentage(bounds, options.threshold, options.root) : calculateVerticalPercentage(bounds, options.threshold, options.root);
+        setPercentage(percentage);
+      };
+
       var root = options.root || window;
@@ -230,3 +231,3 @@ root.addEventListener('scroll', handleScroll, {
     return;
-  }, [inView, options.root, handleScroll]);
+  }, [inView, options.root, options.horizontal, options.threshold, target]);
   return [ref, percentage, entry];
@@ -233,0 +234,0 @@ }

react-scroll-percentage.esm.js

 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { createElement, Component, useState, useCallback, useEffect } from 'react';
+import { createElement, Component, useState, useEffect } from 'react';
 import InView, { useInView } from 'react-intersection-observer';
@@ -182,2 +182,3 @@
  */
+
 function useScrollPercentage(options) {
@@ -193,4 +194,2 @@ if (options === void 0) {
 
-  var target = entry && entry.target;
-
   var _useState = useState(0),
@@ -200,10 +199,12 @@ percentage = _useState[0],
 
-  var handleScroll = useCallback(function () {
-    if (!target) return;
-    var bounds = target.getBoundingClientRect();
-    var percentage = options.horizontal ? calculateHorizontalPercentage(bounds, options.threshold, options.root) : calculateVerticalPercentage(bounds, options.threshold, options.root);
-    setPercentage(percentage);
-  }, [target, options.threshold, options.root, options.horizontal]);
+  var target = entry && entry.target;
   useEffect(function () {
     if (inView) {
+      var handleScroll = function handleScroll() {
+        if (!target) return;
+        var bounds = target.getBoundingClientRect();
+        var percentage = options.horizontal ? calculateHorizontalPercentage(bounds, options.threshold, options.root) : calculateVerticalPercentage(bounds, options.threshold, options.root);
+        setPercentage(percentage);
+      };
+
       var root = options.root || window;
@@ -223,3 +224,3 @@ root.addEventListener('scroll', handleScroll, {
     return;
-  }, [inView, options.root, handleScroll]);
+  }, [inView, options.root, options.horizontal, options.threshold, target]);
   return [ref, percentage, entry];
@@ -226,0 +227,0 @@ }

react-scroll-percentage.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactIntersectionObserver={},e.React)}(this,function(e,t){"use strict";function n(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var s=function(e,t,n,r,o,i,s,a){if(!e){var h;if(void 0===t)h=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,i,s,a],c=0;(h=new Error(t.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw h.framesToPop=1,h}},a=new Map,h=new Map,l=new Map,c=0;function d(e,t,n){void 0===n&&(n={}),n.threshold||(n.threshold=0);var r=n,o=r.root,i=r.rootMargin,d=r.threshold;if(s(!a.has(e),"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",e),e){var u=function(e){return e?l.has(e)?l.get(e):(c+=1,l.set(e,c.toString()),l.get(e)+"_"):""}(o)+(i?d.toString()+"_"+i:d.toString()),p=h.get(u);p||(p=new IntersectionObserver(f,n),u&&h.set(u,p));var v={callback:t,element:e,inView:!1,observerId:u,observer:p,thresholds:p.thresholds||(Array.isArray(d)?d:[d])};return a.set(e,v),p.observe(e),v}}function u(e){if(e){var t=a.get(e);if(t){var n=t.observerId,r=t.observer,o=r.root;r.unobserve(e);var i=!1,s=!1;n&&a.forEach(function(t,r){r!==e&&(t.observerId===n&&(i=!0,s=!0),t.observer.root===o&&(s=!0))}),!s&&o&&l.delete(o),r&&!i&&r.disconnect(),a.delete(e)}}}function f(e){e.forEach(function(e){var t=e.isIntersecting,n=e.intersectionRatio,r=e.target,o=a.get(r);if(o&&n>=0){var i=o.thresholds.some(function(e){return o.inView?n>e:n>=e});void 0!==t&&(i=i&&t),o.inView=i,o.callback(i,e)}})}var p=function(e){function s(){for(var t,r=arguments.length,i=new Array(r),s=0;s<r;s++)i[s]=arguments[s];return o(n(t=e.call.apply(e,[this].concat(i))||this),"state",{inView:!1,entry:void 0}),o(n(t),"node",null),o(n(t),"handleNode",function(e){t.node&&u(t.node),t.node=e||null,t.observeNode()}),o(n(t),"handleChange",function(e,n){(e!==t.state.inView||e)&&t.setState({inView:e,entry:n}),t.props.onChange&&t.props.onChange(e,n)}),t}r(s,e);var a=s.prototype;return a.componentDidMount=function(){},a.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(u(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(u(this.node),this.node=null)},a.componentWillUnmount=function(){this.node&&(u(this.node),this.node=null)},a.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,n=e.root,r=e.rootMargin;d(this.node,this.handleChange,{threshold:t,root:n,rootMargin:r})}},a.render=function(){var e=this.state,n=e.inView,r=e.entry;if(!function(e){return"function"!=typeof e.children}(this.props))return this.props.children({inView:n,entry:r,ref:this.handleNode});var o=this.props,s=o.children,a=o.as,h=o.tag,l=(o.triggerOnce,o.threshold,o.root,o.rootMargin,function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(o,["children","as","tag","triggerOnce","threshold","root","rootMargin"]));return t.createElement(a||h||"div",i({ref:this.handleNode},l),s)},s}(t.Component);function v(e,t,n){if(void 0===t&&(t=0),void 0===n&&(n=window),!n)return 0;var r=(n instanceof Element?n.clientHeight:n.innerHeight)||0,o=t*e.height,i=(e.bottom-o)/(r+e.height-2*o);return 1-Math.max(0,Math.min(1,i))}function g(e,t,n){if(void 0===t&&(t=0),void 0===n&&(n=window),!n)return 0;var r=(n instanceof Element?n.clientWidth:n.innerWidth)||0,o=t*e.width,i=(e.right-o)/(r+e.width-2*o);return 1-Math.max(0,Math.min(1,i))}function w(e){return"function"!=typeof e.children}o(p,"displayName","InView"),o(p,"defaultProps",{threshold:0,triggerOnce:!1});var m=function(e){function i(){for(var t,r=arguments.length,i=new Array(r),s=0;s<r;s++)i[s]=arguments[s];return o(n(t=e.call.apply(e,[this].concat(i))||this),"state",{percentage:0,inView:!1,entry:void 0}),o(n(t),"node",void 0),o(n(t),"monitoring",!1),o(n(t),"handleScroll",function(){if(t.node){var e=t.node.getBoundingClientRect(),n=t.props.horizontal?g(e,t.props.threshold,t.props.root):v(e,t.props.threshold,t.props.root);n!==t.state.percentage&&t.setState({percentage:n})}}),o(n(t),"handleInView",function(e,n){t.node=n.target,t.setState({entry:n,inView:e})}),o(n(t),"handleRenderProps",function(e){var n=e.ref,r=t.state,o=r.percentage,i=r.entry,s=r.inView;return w(t.props)?null:t.props.children({percentage:o,entry:i,inView:s,ref:n})}),t}r(i,e);var s=i.prototype;return s.componentDidUpdate=function(e,t){!this.props.onChange||t.percentage===this.state.percentage&&t.inView===this.state.inView||this.props.onChange(this.state.percentage,this.state.entry),e.root!==this.props.root&&this.monitoring&&(this.monitorScroll(!1,e.root),this.monitorScroll(this.state.inView)),t.inView!==this.state.inView&&this.monitorScroll(this.state.inView,e.root)},s.componentWillUnmount=function(){this.monitorScroll(!1)},s.monitorScroll=function(e,t){var n=t||this.props.root||window;if(e){if(this.monitoring)return;n.addEventListener("scroll",this.handleScroll,{passive:!0}),n.addEventListener("resize",this.handleScroll),this.handleScroll(),this.monitoring=!0}else{if(!this.monitoring)return;n.removeEventListener("scroll",this.handleScroll),n.removeEventListener("resize",this.handleScroll),this.monitoring=!1}},s.render=function(){return t.createElement(p,{onChange:this.handleInView},w(this.props)?this.props.children:this.handleRenderProps)},i}(t.Component);o(m,"displayName","ScrollPercentage"),o(m,"defaultProps",{threshold:0}),e.ScrollPercentage=m,e.default=m,e.useScrollPercentage=function(e){void 0===e&&(e={});var n=function(e){void 0===e&&(e={});var n=t.useState(null),r=n[0],o=n[1],i=t.useState({inView:!1,entry:void 0}),s=i[0],a=i[1];return t.useEffect(function(){if(r)return d(r,function(t,n){a({inView:t,entry:n}),t&&e.triggerOnce&&u(r)},e),function(){u(r)}},[r,e.threshold,e.root,e.rootMargin,e.triggerOnce]),t.useDebugValue(s.inView),[o,s.inView,s.entry]}(e),r=n[0],o=n[1],i=n[2],s=i&&i.target,a=t.useState(0),h=a[0],l=a[1],c=t.useCallback(function(){if(s){var t=s.getBoundingClientRect(),n=e.horizontal?g(t,e.threshold,e.root):v(t,e.threshold,e.root);l(n)}},[s,e.threshold,e.root,e.horizontal]);return t.useEffect(function(){if(o){var t=e.root||window;return t.addEventListener("scroll",c,{passive:!0}),t.addEventListener("resize",c),c(),function(){t.removeEventListener("scroll",c),t.removeEventListener("resize",c)}}},[o,e.root,c]),[r,h,i]},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactIntersectionObserver={},e.React)}(this,function(e,t){"use strict";function n(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var s=function(e,t,n,r,o,i,s,a){if(!e){var h;if(void 0===t)h=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,i,s,a],c=0;(h=new Error(t.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw h.framesToPop=1,h}},a=new Map,h=new Map,l=new Map,c=0;function d(e,t,n){void 0===n&&(n={}),n.threshold||(n.threshold=0);var r=n,o=r.root,i=r.rootMargin,d=r.threshold;if(s(!a.has(e),"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",e),e){var u=function(e){return e?l.has(e)?l.get(e):(c+=1,l.set(e,c.toString()),l.get(e)+"_"):""}(o)+(i?d.toString()+"_"+i:d.toString()),p=h.get(u);p||(p=new IntersectionObserver(f,n),u&&h.set(u,p));var v={callback:t,element:e,inView:!1,observerId:u,observer:p,thresholds:p.thresholds||(Array.isArray(d)?d:[d])};return a.set(e,v),p.observe(e),v}}function u(e){if(e){var t=a.get(e);if(t){var n=t.observerId,r=t.observer,o=r.root;r.unobserve(e);var i=!1,s=!1;n&&a.forEach(function(t,r){r!==e&&(t.observerId===n&&(i=!0,s=!0),t.observer.root===o&&(s=!0))}),!s&&o&&l.delete(o),r&&!i&&r.disconnect(),a.delete(e)}}}function f(e){e.forEach(function(e){var t=e.isIntersecting,n=e.intersectionRatio,r=e.target,o=a.get(r);if(o&&n>=0){var i=o.thresholds.some(function(e){return o.inView?n>e:n>=e});void 0!==t&&(i=i&&t),o.inView=i,o.callback(i,e)}})}var p=function(e){function s(){for(var t,r=arguments.length,i=new Array(r),s=0;s<r;s++)i[s]=arguments[s];return o(n(t=e.call.apply(e,[this].concat(i))||this),"state",{inView:!1,entry:void 0}),o(n(t),"node",null),o(n(t),"handleNode",function(e){t.node&&u(t.node),t.node=e||null,t.observeNode()}),o(n(t),"handleChange",function(e,n){(e!==t.state.inView||e)&&t.setState({inView:e,entry:n}),t.props.onChange&&t.props.onChange(e,n)}),t}r(s,e);var a=s.prototype;return a.componentDidMount=function(){},a.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(u(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(u(this.node),this.node=null)},a.componentWillUnmount=function(){this.node&&(u(this.node),this.node=null)},a.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,n=e.root,r=e.rootMargin;d(this.node,this.handleChange,{threshold:t,root:n,rootMargin:r})}},a.render=function(){var e=this.state,n=e.inView,r=e.entry;if(!function(e){return"function"!=typeof e.children}(this.props))return this.props.children({inView:n,entry:r,ref:this.handleNode});var o=this.props,s=o.children,a=o.as,h=o.tag,l=(o.triggerOnce,o.threshold,o.root,o.rootMargin,function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(o,["children","as","tag","triggerOnce","threshold","root","rootMargin"]));return t.createElement(a||h||"div",i({ref:this.handleNode},l),s)},s}(t.Component);function v(e,t,n){if(void 0===t&&(t=0),void 0===n&&(n=window),!n)return 0;var r=(n instanceof Element?n.clientHeight:n.innerHeight)||0,o=t*e.height,i=(e.bottom-o)/(r+e.height-2*o);return 1-Math.max(0,Math.min(1,i))}function g(e,t,n){if(void 0===t&&(t=0),void 0===n&&(n=window),!n)return 0;var r=(n instanceof Element?n.clientWidth:n.innerWidth)||0,o=t*e.width,i=(e.right-o)/(r+e.width-2*o);return 1-Math.max(0,Math.min(1,i))}function w(e){return"function"!=typeof e.children}o(p,"displayName","InView"),o(p,"defaultProps",{threshold:0,triggerOnce:!1});var m=function(e){function i(){for(var t,r=arguments.length,i=new Array(r),s=0;s<r;s++)i[s]=arguments[s];return o(n(t=e.call.apply(e,[this].concat(i))||this),"state",{percentage:0,inView:!1,entry:void 0}),o(n(t),"node",void 0),o(n(t),"monitoring",!1),o(n(t),"handleScroll",function(){if(t.node){var e=t.node.getBoundingClientRect(),n=t.props.horizontal?g(e,t.props.threshold,t.props.root):v(e,t.props.threshold,t.props.root);n!==t.state.percentage&&t.setState({percentage:n})}}),o(n(t),"handleInView",function(e,n){t.node=n.target,t.setState({entry:n,inView:e})}),o(n(t),"handleRenderProps",function(e){var n=e.ref,r=t.state,o=r.percentage,i=r.entry,s=r.inView;return w(t.props)?null:t.props.children({percentage:o,entry:i,inView:s,ref:n})}),t}r(i,e);var s=i.prototype;return s.componentDidUpdate=function(e,t){!this.props.onChange||t.percentage===this.state.percentage&&t.inView===this.state.inView||this.props.onChange(this.state.percentage,this.state.entry),e.root!==this.props.root&&this.monitoring&&(this.monitorScroll(!1,e.root),this.monitorScroll(this.state.inView)),t.inView!==this.state.inView&&this.monitorScroll(this.state.inView,e.root)},s.componentWillUnmount=function(){this.monitorScroll(!1)},s.monitorScroll=function(e,t){var n=t||this.props.root||window;if(e){if(this.monitoring)return;n.addEventListener("scroll",this.handleScroll,{passive:!0}),n.addEventListener("resize",this.handleScroll),this.handleScroll(),this.monitoring=!0}else{if(!this.monitoring)return;n.removeEventListener("scroll",this.handleScroll),n.removeEventListener("resize",this.handleScroll),this.monitoring=!1}},s.render=function(){return t.createElement(p,{onChange:this.handleInView},w(this.props)?this.props.children:this.handleRenderProps)},i}(t.Component);o(m,"displayName","ScrollPercentage"),o(m,"defaultProps",{threshold:0}),e.ScrollPercentage=m,e.default=m,e.useScrollPercentage=function(e){void 0===e&&(e={});var n=function(e){void 0===e&&(e={});var n=t.useState(null),r=n[0],o=n[1],i=t.useState({inView:!1,entry:void 0}),s=i[0],a=i[1];return t.useEffect(function(){if(r)return d(r,function(t,n){a({inView:t,entry:n}),t&&e.triggerOnce&&u(r)},e),function(){u(r)}},[r,e.threshold,e.root,e.rootMargin,e.triggerOnce]),t.useDebugValue(s.inView),[o,s.inView,s.entry]}(e),r=n[0],o=n[1],i=n[2],s=t.useState(0),a=s[0],h=s[1],l=i&&i.target;return t.useEffect(function(){if(o){var t=function(){if(l){var t=l.getBoundingClientRect(),n=e.horizontal?g(t,e.threshold,e.root):v(t,e.threshold,e.root);h(n)}},n=e.root||window;return n.addEventListener("scroll",t,{passive:!0}),n.addEventListener("resize",t),t(),function(){n.removeEventListener("scroll",t),n.removeEventListener("resize",t)}}},[o,e.root,e.horizontal,e.threshold,l]),[r,a,i]},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=react-scroll-percentage.umd.min.js.map

No alert changes

Worsened metrics

Total package byte prevSize

67670

decreased by-0.1%

No dependency changes