react-within-viewport - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/bundle.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.WithinViewport=e(require("react")):t.WithinViewport=e(t.react)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(1),r=i(o);e.default=r.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),c=n(7),d=i(c),l=n(6),s=i(l),p=n(5),v=i(p),h=n(3),w=i(h),y=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.transform,n=void 0===e?function(t){return{inViewport:t}}:e,i=t.containerStyle,l=void 0===i?{width:"100%",height:"100%",padding:0,border:0}:i,p=t.getHeight,h=void 0===p?function(t){return t.getBoundingClientRect().height}:p,y=t.getWidth,m=void 0===y?function(t){return t.getBoundingClientRect().width}:y,g=t.getTop,b=void 0===g?function(t){return t.getBoundingClientRect().top}:g,O=t.getLeft,j=void 0===O?function(t){return t.getBoundingClientRect().left}:O,_=t.getViewportHeight,x=void 0===_?function(t,e){return t.innerHeight||e.clientHeight}:_,T=t.getViewportWidth,V=void 0===T?function(t,e){return t.innerWidth||e.clientWidth}:T,W=t.defaultAnswer,E=void 0===W?!0:W,L=t.wait,M=void 0===L?200:L,S=t.onViewportEnter,C=void 0===S?function(){}:S,R=t.onViewportLeave,H=void 0===R?function(){}:R;return function(t){var e,i;return i=e=function(e){function i(){var t,e,n,u;o(this,i);for(var a=arguments.length,f=Array(a),c=0;a>c;c++)f[c]=arguments[c];return e=n=r(this,(t=Object.getPrototypeOf(i)).call.apply(t,[this].concat(f))),n.state={containerWidth:null,containerHeight:null,containerTopOffset:null,containerLeftOffset:null,windowWidth:null,windowHeight:null,updated:null},n.updateResize=function(){var t=function(){var t=n.refs.withinViewportContainer;n.setState({containerWidth:m(t),containerHeight:h(t),windowWidth:V(window,document),windowHeight:x(window,document),updated:!0})};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.updateScroll=function(){var t=function(){var t=n.refs.withinViewportContainer;n.setState({containerTopOffset:b(t),containerLeftOffset:j(t),updated:!0})};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.inViewport=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return t.updated?(t.containerTopOffset<0&&t.containerHeight+t.containerTopOffset>0||t.containerTopOffset>=0&&t.containerTopOffset<t.windowHeight)&&(t.containerLeftOffset<0&&t.containerWidth+t.containerLeftOffset>0||t.containerLeftOffset>=0&&t.containerLeftOffset<t.windowWidth):E},u=e,r(n,u)}return u(i,e),f(i,[{key:"componentDidMount",value:function(){window&&window.addEventListener&&(this.debouncedUpdateResize=(0,w.default)(this.updateResize,M),this.debouncedUpdateScroll=(0,w.default)(this.updateScroll,M),window.addEventListener("resize",this.debouncedUpdateResize),window.addEventListener("scroll",this.debouncedUpdateScroll),this.updateResize(),this.updateScroll())}},{key:"componentDidUpdate",value:function(t,e){var n=this.inViewport(e),i=this.inViewport(this.state);null===e.updated&&i===!1&&H(),null===e.updated&&i===!0&&C(),n===!0&&i===!1&&H(),n===!1&&i===!0&&C()}},{key:"componentWillUnmount",value:function(){window&&window.removeEventListener&&(window.removeEventListener("resize",this.debouncedUpdateResize),window.removeEventListener("scroll",this.debouncedUpdateScroll))}},{key:"shouldComponentUpdate",value:function(t,e){return!(0,v.default)(this.props,t)||!(0,v.default)(this.inViewport(this.state),this.inViewport(e))}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withinViewportContainer",style:l},d.default.createElement(t,a({},n(this.inViewport()),this.props)))}}]),i}(c.Component),e.displayName=(0,s.default)(t,"withinViewport"),i}};e.default=y},function(t,e){"use strict";function n(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function i(t,e){if(n(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var i=Object.keys(t),r=Object.keys(e);if(i.length!==r.length)return!1;for(var u=0;u<i.length;u++)if(!o.call(e,i[u])||!n(t[i[u]],e[i[u]]))return!1;return!0}var o=Object.prototype.hasOwnProperty;t.exports=i},function(t,e){function n(t,e,n){function i(e){var n=h,i=w;return h=w=void 0,x=e,m=t.apply(i,n)}function r(t){return x=t,g=setTimeout(d,e),T?i(t):m}function u(t){var n=t-_,i=t-x,o=e-n;return V?O(o,y-i):o}function c(t){var n=t-_,i=t-x;return!_||n>=e||0>n||V&&i>=y}function d(){var t=j();return c(t)?l(t):void(g=setTimeout(d,u(t)))}function l(t){return clearTimeout(g),g=void 0,W&&h?i(t):(h=w=void 0,m)}function s(){void 0!==g&&clearTimeout(g),_=x=0,h=w=g=void 0}function p(){return void 0===g?m:l(j())}function v(){var t=j(),n=c(t);if(h=arguments,w=this,_=t,n){if(void 0===g)return r(_);if(V)return clearTimeout(g),g=setTimeout(d,e),i(_)}return void 0===g&&(g=setTimeout(d,e)),m}var h,w,y,m,g,_=0,x=0,T=!1,V=!1,W=!0;if("function"!=typeof t)throw new TypeError(f);return e=a(e)||0,o(n)&&(T=!!n.leading,V="maxWait"in n,y=V?b(a(n.maxWait)||0,e):y,W="trailing"in n?!!n.trailing:W),v.cancel=s,v.flush=p,v}function i(t){var e=o(t)?g.call(t):"";return e==d||e==l}function o(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function r(t){return!!t&&"object"==typeof t}function u(t){return"symbol"==typeof t||r(t)&&g.call(t)==s}function a(t){if("number"==typeof t)return t;if(u(t))return c;if(o(t)){var e=i(t.valueOf)?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(p,"");var n=h.test(t);return n||w.test(t)?y(t.slice(2),n?2:8):v.test(t)?c:+t}var f="Expected a function",c=NaN,d="[object Function]",l="[object GeneratorFunction]",s="[object Symbol]",p=/^\s+|\s+$/g,v=/^[-+]0x[0-9a-f]+$/i,h=/^0b[01]+$/i,w=/^0o[0-7]+$/i,y=parseInt,m=Object.prototype,g=m.toString,b=Math.max,O=Math.min,j=Date.now;t.exports=n},function(t,e){"use strict";e.__esModule=!0;var n=function(t){if("string"==typeof t)return t;if(t)return t.displayName||t.name||"Component"};e.default=n},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(2),r=i(o);e.default=r.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(4),r=i(o),u=function(t,e){return e+"("+(0,r.default)(t)+")"};e.default=u},function(e,n){e.exports=t}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.WithinViewport=e(require("react")):t.WithinViewport=e(t.react)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var r=n(1),o=i(r);e.default=o.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),c=n(7),d=i(c),l=n(6),s=i(l),p=n(5),h=i(p),v=n(3),w=i(v),y=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.transform,n=void 0===e?function(t){return{inViewport:t}}:e,i=t.containerStyle,l=void 0===i?{width:"100%",height:"100%",padding:0,border:0}:i,p=t.getHeight,v=void 0===p?function(t){return t.getBoundingClientRect().height}:p,y=t.getWidth,g=void 0===y?function(t){return t.getBoundingClientRect().width}:y,m=t.getTop,b=void 0===m?function(t){return t.getBoundingClientRect().top}:m,O=t.getLeft,j=void 0===O?function(t){return t.getBoundingClientRect().left}:O,_=t.getViewportHeight,x=void 0===_?function(t,e){return t.innerHeight||e.clientHeight}:_,T=t.getViewportWidth,V=void 0===T?function(t,e){return t.innerWidth||e.clientWidth}:T,W=t.defaultAnswer,L=void 0===W?!0:W,E=t.wait,R=void 0===E?200:E,H=t.onViewportEnter,M=void 0===H?function(){}:H,S=t.onViewportLeave,C=void 0===S?function(){}:S;return function(t){var e,i;return i=e=function(e){function i(){var t,e,n,u;r(this,i);for(var f=arguments.length,c=Array(f),d=0;f>d;d++)c[d]=arguments[d];return e=n=o(this,(t=Object.getPrototypeOf(i)).call.apply(t,[this].concat(c))),n.state={containerWidth:null,containerHeight:null,containerTopOffset:null,containerLeftOffset:null,windowWidth:null,windowHeight:null,ready:!1},n.updateResize=function(){var t=function(){var t=n.refs.withinViewportContainer,e={containerWidth:g(t),containerHeight:v(t),windowWidth:V(window,document),windowHeight:x(window,document)};n.setState(a({},e,{ready:n.isReady(a({},n.state,e))}))};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.updateScroll=function(){var t=function(){var t=n.refs.withinViewportContainer,e={containerTopOffset:b(t),containerLeftOffset:j(t)};n.setState(a({},e,{ready:n.isReady(a({},n.state,e))}))};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.isReady=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return null!==t.containerWidth&&null!==t.containerHeight&&null!==t.containerTopOffset&&null!==t.containerLeftOffset&&null!==t.windowHeight&&null!==t.windowWidth},n.inViewport=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return t.ready?(t.containerTopOffset<0&&t.containerHeight+t.containerTopOffset>0||t.containerTopOffset>=0&&t.containerTopOffset<t.windowHeight)&&(t.containerLeftOffset<0&&t.containerWidth+t.containerLeftOffset>0||t.containerLeftOffset>=0&&t.containerLeftOffset<t.windowWidth):L},u=e,o(n,u)}return u(i,e),f(i,[{key:"componentDidMount",value:function(){window&&window.addEventListener&&(this.debouncedUpdateResize=(0,w.default)(this.updateResize,R),this.debouncedUpdateScroll=(0,w.default)(this.updateScroll,R),window.addEventListener("resize",this.debouncedUpdateResize),window.addEventListener("scroll",this.debouncedUpdateScroll),this.updateResize(),this.updateScroll())}},{key:"componentDidUpdate",value:function(t,e){var n=this.inViewport(e),i=this.inViewport(this.state);null===e.ready&&i===!1&&C(),null===e.ready&&i===!0&&M(),n===!0&&i===!1&&C(),n===!1&&i===!0&&M()}},{key:"componentWillUnmount",value:function(){window&&window.removeEventListener&&(window.removeEventListener("resize",this.debouncedUpdateResize),window.removeEventListener("scroll",this.debouncedUpdateScroll))}},{key:"shouldComponentUpdate",value:function(t,e){return!(0,h.default)(this.props,t)||!(0,h.default)(this.inViewport(this.state),this.inViewport(e))}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withinViewportContainer",style:l},d.default.createElement(t,a({},n(this.inViewport()),this.props)))}}]),i}(c.Component),e.displayName=(0,s.default)(t,"withinViewport"),i}};e.default=y},function(t,e){"use strict";function n(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function i(t,e){if(n(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var i=Object.keys(t),o=Object.keys(e);if(i.length!==o.length)return!1;for(var u=0;u<i.length;u++)if(!r.call(e,i[u])||!n(t[i[u]],e[i[u]]))return!1;return!0}var r=Object.prototype.hasOwnProperty;t.exports=i},function(t,e){function n(t,e,n){function i(e){var n=v,i=w;return v=w=void 0,x=e,g=t.apply(i,n)}function o(t){return x=t,m=setTimeout(d,e),T?i(t):g}function u(t){var n=t-_,i=t-x,r=e-n;return V?O(r,y-i):r}function c(t){var n=t-_,i=t-x;return!_||n>=e||0>n||V&&i>=y}function d(){var t=j();return c(t)?l(t):void(m=setTimeout(d,u(t)))}function l(t){return clearTimeout(m),m=void 0,W&&v?i(t):(v=w=void 0,g)}function s(){void 0!==m&&clearTimeout(m),_=x=0,v=w=m=void 0}function p(){return void 0===m?g:l(j())}function h(){var t=j(),n=c(t);if(v=arguments,w=this,_=t,n){if(void 0===m)return o(_);if(V)return clearTimeout(m),m=setTimeout(d,e),i(_)}return void 0===m&&(m=setTimeout(d,e)),g}var v,w,y,g,m,_=0,x=0,T=!1,V=!1,W=!0;if("function"!=typeof t)throw new TypeError(f);return e=a(e)||0,r(n)&&(T=!!n.leading,V="maxWait"in n,y=V?b(a(n.maxWait)||0,e):y,W="trailing"in n?!!n.trailing:W),h.cancel=s,h.flush=p,h}function i(t){var e=r(t)?m.call(t):"";return e==d||e==l}function r(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function o(t){return!!t&&"object"==typeof t}function u(t){return"symbol"==typeof t||o(t)&&m.call(t)==s}function a(t){if("number"==typeof t)return t;if(u(t))return c;if(r(t)){var e=i(t.valueOf)?t.valueOf():t;t=r(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(p,"");var n=v.test(t);return n||w.test(t)?y(t.slice(2),n?2:8):h.test(t)?c:+t}var f="Expected a function",c=NaN,d="[object Function]",l="[object GeneratorFunction]",s="[object Symbol]",p=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,w=/^0o[0-7]+$/i,y=parseInt,g=Object.prototype,m=g.toString,b=Math.max,O=Math.min,j=Date.now;t.exports=n},function(t,e){"use strict";e.__esModule=!0;var n=function(t){if("string"==typeof t)return t;if(t)return t.displayName||t.name||"Component"};e.default=n},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(2),o=i(r);e.default=o.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(4),o=i(r),u=function(t,e){return e+"("+(0,o.default)(t)+")"};e.default=u},function(e,n){e.exports=t}])});

dist/within-viewport.js

@@ -105,3 +105,3 @@ 'use strict';
           windowHeight: null,
-          updated: null
+          ready: false
         }, _this.updateResize = function () {
@@ -111,9 +111,10 @@ var update = function update() {
 
-            _this.setState({
+            var newState = {
               containerWidth: getWidth(elem),
               containerHeight: getHeight(elem),
               windowWidth: getViewportWidth(window, document),
-              windowHeight: getViewportHeight(window, document),
-              updated: true
-            });
+              windowHeight: getViewportHeight(window, document)
+            };
+
+            _this.setState(_extends({}, newState, { ready: _this.isReady(_extends({}, _this.state, newState)) }));
           };
@@ -132,7 +133,7 @@
 
-            _this.setState({
+            var newState = {
               containerTopOffset: getTop(elem),
-              containerLeftOffset: getLeft(elem),
-              updated: true
-            });
+              containerLeftOffset: getLeft(elem)
+            };
+            _this.setState(_extends({}, newState, { ready: _this.isReady(_extends({}, _this.state, newState)) }));
           };
@@ -147,6 +148,9 @@
           }
+        }, _this.isReady = function () {
+          var state = arguments.length <= 0 || arguments[0] === undefined ? _this.state : arguments[0];
+          return state.containerWidth !== null && state.containerHeight !== null && state.containerTopOffset !== null && state.containerLeftOffset !== null && state.windowHeight !== null && state.windowWidth !== null;
         }, _this.inViewport = function () {
           var state = arguments.length <= 0 || arguments[0] === undefined ? _this.state : arguments[0];
 
-          if (state.updated) {
+          if (state.ready) {
             return (state.containerTopOffset < 0 && state.containerHeight + state.containerTopOffset > 0 || state.containerTopOffset >= 0 && state.containerTopOffset < state.windowHeight) && (state.containerLeftOffset < 0 && state.containerWidth + state.containerLeftOffset > 0 || state.containerLeftOffset >= 0 && state.containerLeftOffset < state.windowWidth);
@@ -176,6 +180,6 @@ }
 
-          if (prevState.updated === null && is === false) {
+          if (prevState.ready === null && is === false) {
             onViewportLeave();
           }
-          if (prevState.updated === null && is === true) {
+          if (prevState.ready === null && is === true) {
             onViewportEnter();
@@ -182,0 +186,0 @@ }

package.json

 {
   "name": "react-within-viewport",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Debounced React high order component to flag when it's container is inside the viewport.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/__tests__/within-viewport-test.js

@@ -15,3 +15,6 @@ jest.unmock('../within-viewport')
 
-    beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+    beforeEach(() => {
+      subject = mount(<Decorated title={'My title'} />)
+      subject.setState({ ready: true })
+    })
 
@@ -31,3 +34,6 @@ it('renders', () => { expect(subject).toBeTruthy() })
 
-    beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+    beforeEach(() => {
+      subject = mount(<Decorated title={'My title'} />)
+      subject.setState({ ready: true })
+    })
 
@@ -62,4 +68,8 @@ it('injects property insideViewport', () => {
       })(Header)
-      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
 
+      beforeEach(() => {
+        subject = mount(<Decorated title={'My title'} />)
+        subject.setState({ ready: true })
+      })
+
       it('flags inViewport true', () => {
@@ -79,4 +89,8 @@ expect(subject.find(Header).prop('inViewport')).toBe(true)
       })(Header)
-      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
 
+      beforeEach(() => {
+        subject = mount(<Decorated title={'My title'} />)
+        subject.setState({ ready: true })
+      })
+
       it('flags inViewport false', () => {
@@ -96,4 +110,8 @@ expect(subject.find(Header).prop('inViewport')).toBe(false)
       })(Header)
-      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
 
+      beforeEach(() => {
+        subject = mount(<Decorated title={'My title'} />)
+        subject.setState({ ready: true })
+      })
+
       it('flags inViewport false', () => {
@@ -113,4 +131,8 @@ expect(subject.find(Header).prop('inViewport')).toBe(false)
       })(Header)
-      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
 
+      beforeEach(() => {
+        subject = mount(<Decorated title={'My title'} />)
+        subject.setState({ ready: true })
+      })
+
       it('flags inViewport false', () => {
@@ -132,4 +154,8 @@ expect(subject.find(Header).prop('inViewport')).toBe(false)
       })(Header)
-      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
 
+      beforeEach(() => {
+        subject = mount(<Decorated title={'My title'} />)
+        subject.setState({ ready: true })
+      })
+
       it('flags inViewport true', () => {
@@ -136,0 +162,0 @@ expect(subject.find(Header).prop('inViewport')).toBe(true)

src/within-viewport.js

@@ -34,3 +34,3 @@ import React, { Component } from 'react'
     windowHeight: null,
-    updated: null,
+    ready: false,
   }
@@ -53,4 +53,4 @@
 
-    if (prevState.updated === null && is === false) { onViewportLeave() }
-    if (prevState.updated === null && is === true) { onViewportEnter() }
+    if (prevState.ready === null && is === false) { onViewportLeave() }
+    if (prevState.ready === null && is === true) { onViewportEnter() }
     if (was === true && is === false) { onViewportLeave() }
@@ -78,3 +78,3 @@ if (was === false && is === true) { onViewportEnter() }
 
-      this.setState({
+      const newState = {
         containerWidth: getWidth(elem),
@@ -84,4 +84,5 @@ containerHeight: getHeight(elem),
         windowHeight: getViewportHeight(window, document),
-        updated: true,
-      })
+      }
+
+      this.setState({ ...newState, ready: this.isReady({ ...this.state, ...newState }) })
     }
@@ -100,7 +101,7 @@
 
-      this.setState({
+      const newState = {
         containerTopOffset: getTop(elem),
         containerLeftOffset: getLeft(elem),
-        updated: true,
-      })
+      }
+      this.setState({ ...newState, ready: this.isReady({ ...this.state, ...newState }) })
     }
@@ -115,4 +116,13 @@
 
+  isReady = (state = this.state) => (
+    state.containerWidth !== null &&
+    state.containerHeight !== null &&
+    state.containerTopOffset !== null &&
+    state.containerLeftOffset !== null &&
+    state.windowHeight !== null &&
+    state.windowWidth !== null
+  )
+
   inViewport = (state = this.state) => {
-    if (state.updated) {
+    if (state.ready) {
       return (
@@ -119,0 +129,0 @@ (

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

33843

increased by5.03%

Lines of code

511

increased by6.68%

No dependency changes