react-scroll-percentage - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

package.json

 {
   "name": "react-scroll-percentage",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.",
-  "main": "dist/react-scroll-percentage.cjs.js",
-  "jsnext:main": "dist/react-scroll-percentage.esm.js",
-  "module": "dist/react-scroll-percentage.esm.js",
-  "unpkg": "dist/react-scroll-percentage.umd.min.js",
+  "main": "react-scroll-percentage.cjs.js",
+  "jsnext:main": "react-scroll-percentage.esm.js",
+  "module": "react-scroll-percentage.esm.js",
+  "unpkg": "react-scroll-percentage.umd.min.js",
   "author": "Daniel Schmidt",
@@ -10,0 +10,0 @@ "repository": {

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).ReactScrollPercentage={},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=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})});
 //# sourceMappingURL=react-scroll-percentage.umd.min.js.map

No alert changes

Worsened metrics

Total package byte prevSize

67736

decreased by-0.02%

No dependency changes