react-visibility-sensor - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

dist/visibility-sensor.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		root["react-visibility-sensor"] = factory(root["React"], root["ReactDOM"]);
-})(window, function(__WEBPACK_EXTERNAL_MODULE__1__, __WEBPACK_EXTERNAL_MODULE__2__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE__1__, __WEBPACK_EXTERNAL_MODULE__2__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -149,4 +149,2 @@ /******/ 	// The module cache
 
-//let containmentPropType = typeof window !== 'undefined' ? PropTypes.instanceOf(window.Element) : PropTypes.any;
-
 var VisibilitySensor = function (_React$Component) {
@@ -212,7 +210,7 @@ _inherits(VisibilitySensor, _React$Component);
       if (_this.props.scrollCheck) {
-        _this.addEventListener(_this.getContainer(), 'scroll', _this.props.scrollDelay, _this.props.scrollThrottle);
+        _this.addEventListener(_this.getContainer(), "scroll", _this.props.scrollDelay, _this.props.scrollThrottle);
       }
 
       if (_this.props.resizeCheck) {
-        _this.addEventListener(window, 'resize', _this.props.resizeDelay, _this.props.resizeThrottle);
+        _this.addEventListener(window, "resize", _this.props.resizeDelay, _this.props.resizeThrottle);
       }
@@ -276,3 +274,3 @@
       var offset = _this.props.offset || {};
-      var hasValidOffset = (typeof offset === 'undefined' ? 'undefined' : _typeof(offset)) === 'object';
+      var hasValidOffset = (typeof offset === "undefined" ? "undefined" : _typeof(offset)) === "object";
 
@@ -303,3 +301,3 @@ if (hasValidOffset) {
         // account for partial visibility on a single edge
-        if (typeof _this.props.partialVisibility === 'string') {
+        if (typeof _this.props.partialVisibility === "string") {
           partialVisible = visibilityRect[_this.props.partialVisibility];
@@ -314,4 +312,4 @@ }
       // Deprecated options for calculating offset.
-      if (typeof offset.direction === 'string' && typeof offset.value === 'number') {
-        console.warn('[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }', offset.direction, offset.value);
+      if (typeof offset.direction === "string" && typeof offset.value === "number") {
+        console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }", offset.direction, offset.value);
 
@@ -343,3 +341,3 @@ isVisible = (0, _isVisibleWithOffset2.default)(offset, rect, containmentRect);
   _createClass(VisibilitySensor, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
@@ -352,3 +350,3 @@ this.node = _reactDom2.default.findDOMNode(this);
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
@@ -358,3 +356,3 @@ this.stopWatching();
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
@@ -376,3 +374,3 @@ // re-register node in componentDidUpdate if children diffs [#103]
   }, {
-    key: 'roundRectDown',
+    key: "roundRectDown",
     value: function roundRectDown(rect) {
@@ -392,3 +390,3 @@ return {
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -423,3 +421,3 @@ if (this.props.children instanceof Function) {
   containment: null,
-  children: _react2.default.createElement('span', null)
+  children: _react2.default.createElement("span", null)
 };
@@ -429,3 +427,3 @@ VisibilitySensor.propTypes = {
   active: _propTypes2.default.bool,
-  partialVisibility: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(['top', 'right', 'bottom', 'left'])]),
+  partialVisibility: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(["top", "right", "bottom", "left"])]),
   delayedCall: _propTypes2.default.bool,
@@ -440,3 +438,3 @@ offset: _propTypes2.default.oneOfType([_propTypes2.default.shape({
   _propTypes2.default.shape({
-    direction: _propTypes2.default.oneOf(['top', 'right', 'bottom', 'left']),
+    direction: _propTypes2.default.oneOf(["top", "right", "bottom", "left"]),
     value: _propTypes2.default.number
@@ -452,3 +450,3 @@ })]),
   intervalDelay: _propTypes2.default.number,
-  containment: typeof window !== 'undefined' ? _propTypes2.default.instanceOf(window.Element) : _propTypes2.default.any,
+  containment: typeof window !== "undefined" ? _propTypes2.default.instanceOf(window.Element) : _propTypes2.default.any,
   children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
@@ -455,0 +453,0 @@ minTopValue: _propTypes2.default.number

dist/visibility-sensor.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports["react-visibility-sensor"]=t(require("react"),require("react-dom")):e["react-visibility-sensor"]=t(e.React,e.ReactDOM)}(window,function(o,n){return function(o){var n={};function r(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return o[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}return r.m=o,r.c=n,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(o,n,function(e){return t[e]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(){function n(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,o){return t&&n(e.prototype,t),o&&n(e,o),e}}(),r=a(o(1)),i=a(o(2)),l=a(o(3)),d=a(o(6));function a(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var s=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return s.getContainer=function(){return s.props.containment||window},s.addEventListener=function(e,t,o,n){s.debounceCheck||(s.debounceCheck={});var r=void 0,i=function(){r=null,s.check()},l={target:e,fn:-1<n?function(){r||(r=setTimeout(i,n||0))}:function(){clearTimeout(r),r=setTimeout(i,o||0)},getLastTimeout:function(){return r}};e.addEventListener(t,l.fn),s.debounceCheck[t]=l},s.startWatching=function(){s.debounceCheck||s.interval||(s.props.intervalCheck&&(s.interval=setInterval(s.check,s.props.intervalDelay)),s.props.scrollCheck&&s.addEventListener(s.getContainer(),"scroll",s.props.scrollDelay,s.props.scrollThrottle),s.props.resizeCheck&&s.addEventListener(window,"resize",s.props.resizeDelay,s.props.resizeThrottle),!s.props.delayedCall&&s.check())},s.stopWatching=function(){if(s.debounceCheck)for(var e in s.debounceCheck)if(s.debounceCheck.hasOwnProperty(e)){var t=s.debounceCheck[e];clearTimeout(t.getLastTimeout()),t.target.removeEventListener(e,t.fn),s.debounceCheck[e]=null}s.debounceCheck=null,s.interval&&(s.interval=clearInterval(s.interval))},s.check=function(){var e,t=s.node,o=void 0,n=void 0;if(!t)return s.state;if(void 0===(e=s.roundRectDown(t.getBoundingClientRect())).width&&(e.width=e.right-e.left),void 0===e.height&&(e.height=e.bottom-e.top),o=e,s.props.containment){var r=s.props.containment.getBoundingClientRect();n={top:r.top,left:r.left,bottom:r.bottom,right:r.right}}else n={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth};var i=s.props.offset||{};"object"===(void 0===i?"undefined":p(i))&&(n.top+=i.top||0,n.left+=i.left||0,n.bottom-=i.bottom||0,n.right-=i.right||0);var l={top:o.top>=n.top,left:o.left>=n.left,bottom:o.bottom<=n.bottom,right:o.right<=n.right},a=0<o.height&&0<o.width,u=a&&l.top&&l.left&&l.bottom&&l.right;if(a&&s.props.partialVisibility){var c=o.top<=n.bottom&&o.bottom>=n.top&&o.left<=n.right&&o.right>=n.left;"string"==typeof s.props.partialVisibility&&(c=l[s.props.partialVisibility]),u=s.props.minTopValue?c&&o.top<=n.bottom-s.props.minTopValue:c}"string"==typeof i.direction&&"number"==typeof i.value&&(console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }",i.direction,i.value),u=(0,d.default)(i,o,n));var f=s.state;return s.state.isVisible!==u&&(f={isVisible:u,visibilityRect:l},s.setState(f),s.props.onChange&&s.props.onChange(u)),f},s.state={isVisible:null,visibilityRect:{}},s}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,r.default.Component),n(t,[{key:"componentDidMount",value:function(){this.node=i.default.findDOMNode(this),this.props.active&&this.startWatching()}},{key:"componentWillUnmount",value:function(){this.stopWatching()}},{key:"componentDidUpdate",value:function(e){this.node=i.default.findDOMNode(this),this.props.active&&!e.active?(this.setState({isVisible:null,visibilityRect:{}}),this.startWatching()):this.props.active||this.stopWatching()}},{key:"roundRectDown",value:function(e){return{top:Math.floor(e.top),left:Math.floor(e.left),bottom:Math.floor(e.bottom),right:Math.floor(e.right)}}},{key:"render",value:function(){return this.props.children instanceof Function?this.props.children({isVisible:this.state.isVisible,visibilityRect:this.state.visibilityRect}):r.default.Children.only(this.props.children)}}]),t}();u.defaultProps={active:!0,partialVisibility:!1,minTopValue:0,scrollCheck:!1,scrollDelay:250,scrollThrottle:-1,resizeCheck:!1,resizeDelay:250,resizeThrottle:-1,intervalCheck:!0,intervalDelay:100,delayedCall:!1,offset:{},containment:null,children:r.default.createElement("span",null)},u.propTypes={onChange:l.default.func,active:l.default.bool,partialVisibility:l.default.oneOfType([l.default.bool,l.default.oneOf(["top","right","bottom","left"])]),delayedCall:l.default.bool,offset:l.default.oneOfType([l.default.shape({top:l.default.number,left:l.default.number,bottom:l.default.number,right:l.default.number}),l.default.shape({direction:l.default.oneOf(["top","right","bottom","left"]),value:l.default.number})]),scrollCheck:l.default.bool,scrollDelay:l.default.number,scrollThrottle:l.default.number,resizeCheck:l.default.bool,resizeDelay:l.default.number,resizeThrottle:l.default.number,intervalCheck:l.default.bool,intervalDelay:l.default.number,containment:"undefined"!=typeof window?l.default.instanceOf(window.Element):l.default.any,children:l.default.oneOfType([l.default.element,l.default.func]),minTopValue:l.default.number},t.default=u},function(e,t){e.exports=o},function(e,t){e.exports=n},function(e,t,o){e.exports=o(4)()},function(e,t,o){"use strict";var a=o(5);function n(){}e.exports=function(){function e(e,t,o,n,r,i){if(i!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}var o={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return o.checkPropTypes=n,o.PropTypes=o}},function(e,t,o){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,o){"use strict";e.exports=function(e,t,o){var n=e.direction,r=e.value;switch(n){case"top":return o.top+r<t.top&&o.bottom>t.bottom&&o.left<t.left&&o.right>t.right;case"left":return o.left+r<t.left&&o.bottom>t.bottom&&o.top<t.top&&o.right>t.right;case"bottom":return o.bottom-r>t.bottom&&o.left<t.left&&o.right>t.right&&o.top<t.top;case"right":return o.right-r>t.right&&o.left<t.left&&o.top<t.top&&o.bottom>t.bottom}}}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],e):"object"==typeof exports?exports["react-visibility-sensor"]=e(require("react"),require("react-dom")):t["react-visibility-sensor"]=e(t.React,t.ReactDOM)}(this,function(o,n){return function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return o[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=o,r.c=n,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),t}}(),r=a(o(1)),i=a(o(2)),l=a(o(3)),d=a(o(6));function a(t){return t&&t.__esModule?t:{default:t}}var u=function(t){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var s=function(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}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return s.getContainer=function(){return s.props.containment||window},s.addEventListener=function(t,e,o,n){s.debounceCheck||(s.debounceCheck={});var r=void 0,i=function(){r=null,s.check()},l={target:t,fn:-1<n?function(){r||(r=setTimeout(i,n||0))}:function(){clearTimeout(r),r=setTimeout(i,o||0)},getLastTimeout:function(){return r}};t.addEventListener(e,l.fn),s.debounceCheck[e]=l},s.startWatching=function(){s.debounceCheck||s.interval||(s.props.intervalCheck&&(s.interval=setInterval(s.check,s.props.intervalDelay)),s.props.scrollCheck&&s.addEventListener(s.getContainer(),"scroll",s.props.scrollDelay,s.props.scrollThrottle),s.props.resizeCheck&&s.addEventListener(window,"resize",s.props.resizeDelay,s.props.resizeThrottle),!s.props.delayedCall&&s.check())},s.stopWatching=function(){if(s.debounceCheck)for(var t in s.debounceCheck)if(s.debounceCheck.hasOwnProperty(t)){var e=s.debounceCheck[t];clearTimeout(e.getLastTimeout()),e.target.removeEventListener(t,e.fn),s.debounceCheck[t]=null}s.debounceCheck=null,s.interval&&(s.interval=clearInterval(s.interval))},s.check=function(){var t,e=s.node,o=void 0,n=void 0;if(!e)return s.state;if(void 0===(t=s.roundRectDown(e.getBoundingClientRect())).width&&(t.width=t.right-t.left),void 0===t.height&&(t.height=t.bottom-t.top),o=t,s.props.containment){var r=s.props.containment.getBoundingClientRect();n={top:r.top,left:r.left,bottom:r.bottom,right:r.right}}else n={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth};var i=s.props.offset||{};"object"===(void 0===i?"undefined":p(i))&&(n.top+=i.top||0,n.left+=i.left||0,n.bottom-=i.bottom||0,n.right-=i.right||0);var l={top:o.top>=n.top,left:o.left>=n.left,bottom:o.bottom<=n.bottom,right:o.right<=n.right},a=0<o.height&&0<o.width,u=a&&l.top&&l.left&&l.bottom&&l.right;if(a&&s.props.partialVisibility){var c=o.top<=n.bottom&&o.bottom>=n.top&&o.left<=n.right&&o.right>=n.left;"string"==typeof s.props.partialVisibility&&(c=l[s.props.partialVisibility]),u=s.props.minTopValue?c&&o.top<=n.bottom-s.props.minTopValue:c}"string"==typeof i.direction&&"number"==typeof i.value&&(console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }",i.direction,i.value),u=(0,d.default)(i,o,n));var f=s.state;return s.state.isVisible!==u&&(f={isVisible:u,visibilityRect:l},s.setState(f),s.props.onChange&&s.props.onChange(u)),f},s.state={isVisible:null,visibilityRect:{}},s}return function(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)}(e,r.default.Component),n(e,[{key:"componentDidMount",value:function(){this.node=i.default.findDOMNode(this),this.props.active&&this.startWatching()}},{key:"componentWillUnmount",value:function(){this.stopWatching()}},{key:"componentDidUpdate",value:function(t){this.node=i.default.findDOMNode(this),this.props.active&&!t.active?(this.setState({isVisible:null,visibilityRect:{}}),this.startWatching()):this.props.active||this.stopWatching()}},{key:"roundRectDown",value:function(t){return{top:Math.floor(t.top),left:Math.floor(t.left),bottom:Math.floor(t.bottom),right:Math.floor(t.right)}}},{key:"render",value:function(){return this.props.children instanceof Function?this.props.children({isVisible:this.state.isVisible,visibilityRect:this.state.visibilityRect}):r.default.Children.only(this.props.children)}}]),e}();u.defaultProps={active:!0,partialVisibility:!1,minTopValue:0,scrollCheck:!1,scrollDelay:250,scrollThrottle:-1,resizeCheck:!1,resizeDelay:250,resizeThrottle:-1,intervalCheck:!0,intervalDelay:100,delayedCall:!1,offset:{},containment:null,children:r.default.createElement("span",null)},u.propTypes={onChange:l.default.func,active:l.default.bool,partialVisibility:l.default.oneOfType([l.default.bool,l.default.oneOf(["top","right","bottom","left"])]),delayedCall:l.default.bool,offset:l.default.oneOfType([l.default.shape({top:l.default.number,left:l.default.number,bottom:l.default.number,right:l.default.number}),l.default.shape({direction:l.default.oneOf(["top","right","bottom","left"]),value:l.default.number})]),scrollCheck:l.default.bool,scrollDelay:l.default.number,scrollThrottle:l.default.number,resizeCheck:l.default.bool,resizeDelay:l.default.number,resizeThrottle:l.default.number,intervalCheck:l.default.bool,intervalDelay:l.default.number,containment:"undefined"!=typeof window?l.default.instanceOf(window.Element):l.default.any,children:l.default.oneOfType([l.default.element,l.default.func]),minTopValue:l.default.number},e.default=u},function(t,e){t.exports=o},function(t,e){t.exports=n},function(t,e,o){t.exports=o(4)()},function(t,e,o){"use strict";var a=o(5);function n(){}t.exports=function(){function t(t,e,o,n,r,i){if(i!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function e(){return t}var o={array:t.isRequired=t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return o.checkPropTypes=n,o.PropTypes=o}},function(t,e,o){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,e,o){"use strict";t.exports=function(t,e,o){var n=t.direction,r=t.value;switch(n){case"top":return o.top+r<e.top&&o.bottom>e.bottom&&o.left<e.left&&o.right>e.right;case"left":return o.left+r<e.left&&o.bottom>e.bottom&&o.top<e.top&&o.right>e.right;case"bottom":return o.bottom-r>e.bottom&&o.left<e.left&&o.right>e.right&&o.top<e.top;case"right":return o.right-r>e.right&&o.left<e.left&&o.top<e.top&&o.bottom>e.bottom}}}])});

example-umd/main.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,3 +7,3 @@ class Example extends React.Component {
     this.state = {
-      msg: ''
+      msg: ""
     };
@@ -16,3 +16,3 @@
     this.setState({
-      msg: 'Element is now ' + (isVisible ? 'visible' : 'hidden')
+      msg: "Element is now " + (isVisible ? "visible" : "hidden")
     });
@@ -22,30 +22,38 @@ }
   render() {
-    return (
-      React.createElement("div", null,
-        React.createElement("p", {className: "msg"}, this.state.msg),
-        React.createElement("div", {className: "before"}),
-        React.createElement(VisibilitySensor, {
-            containment: this.props.containment,
-            onChange: this.onChange,
-            minTopValue: this.props.minTopValue,
-            partialVisibility: this.props.partialVisibility
-          },
-          React.createElement("div", {className: "sensor"})
-        ),
-        React.createElement("div", {className: "after"})
-      )
-    )
+    return React.createElement(
+      "div",
+      null,
+      React.createElement("p", { className: "msg" }, this.state.msg),
+      React.createElement("div", { className: "before" }),
+      React.createElement(
+        VisibilitySensor,
+        {
+          containment: this.props.containment,
+          onChange: this.onChange,
+          minTopValue: this.props.minTopValue,
+          partialVisibility: this.props.partialVisibility
+        },
+        React.createElement("div", { className: "sensor" })
+      ),
+      React.createElement("div", { className: "after" })
+    );
   }
 }
 
-ReactDOM.render(React.createElement(Example), document.getElementById('example'));
+ReactDOM.render(
+  React.createElement(Example),
+  document.getElementById("example")
+);
 
-var container = document.getElementById('example-container');
-var elem = container.querySelector('.inner');
+var container = document.getElementById("example-container");
+var elem = container.querySelector(".inner");
 container.scrollTop = 320;
 container.scrollLeft = 320;
-ReactDOM.render(React.createElement(Example, {
-  containment: container,
-  minTopValue: 10,
-  partialVisibility: true
-}), elem);
+ReactDOM.render(
+  React.createElement(Example, {
+    containment: container,
+    minTopValue: 10,
+    partialVisibility: true
+  }),
+  elem
+);

example/main.js

@@ -1,9 +0,8 @@
-'use strict';
+"use strict";
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import VisibilitySensor from '../visibility-sensor';
+import React from "react";
+import ReactDOM from "react-dom";
+import VisibilitySensor from "../visibility-sensor";
 
 class Example extends React.Component {
-
   constructor(props) {
@@ -13,11 +12,11 @@ super(props);
     this.state = {
-      msg: ''
+      msg: ""
     };
   }
 
-  onChange = (isVisible) => {
+  onChange = isVisible => {
     this.setState({
-      msg: 'Element is now ' + (isVisible ? 'visible' : 'hidden')
+      msg: "Element is now " + (isVisible ? "visible" : "hidden")
     });
-  }
+  };
 
@@ -27,4 +26,4 @@ render() {
       <div>
-        <p className='msg'>{this.state.msg}</p>
-        <div className='before'></div>
+        <p className="msg">{this.state.msg}</p>
+        <div className="before" />
         <VisibilitySensor
@@ -38,15 +37,19 @@ scrollCheck
           partialVisibility={this.props.partialVisibility}
-          offset={this.props.offset}>
-          <div className='sensor' />
+          offset={this.props.offset}
+        >
+          <div className="sensor" />
         </VisibilitySensor>
-        <div className='after'></div>
+        <div className="after" />
       </div>
-    )
+    );
   }
 }
 
-ReactDOM.render(React.createElement(Example), document.getElementById('example'));
+ReactDOM.render(
+  React.createElement(Example),
+  document.getElementById("example")
+);
 
-var container = document.getElementById('example-container');
-var elem = container.querySelector('.inner');
+var container = document.getElementById("example-container");
+var elem = container.querySelector(".inner");
 
@@ -56,6 +59,9 @@ container.scrollTop = 320;
 
-ReactDOM.render(React.createElement(Example, {
-  containment: container,
-  minTopValue: 10,
-  partialVisibility: true
-}), elem);
+ReactDOM.render(
+  React.createElement(Example, {
+    containment: container,
+    minTopValue: 10,
+    partialVisibility: true
+  }),
+  elem
+);

karma.conf.js

@@ -6,21 +6,14 @@ // Karma configuration
   config.set({
-
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
+    basePath: "",
 
-
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha'],
+    frameworks: ["mocha"],
 
-
     // list of files / patterns to load in the browser
-    files: [
-      './tests/bundle.js'
-    ],
+    files: ["./tests/bundle.js"],
 
-
     // list of files to exclude
-    exclude: [
-    ],
+    exclude: [],
 
@@ -30,13 +23,10 @@ // test results reporter to use
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
+    reporters: ["progress"],
 
-
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
@@ -46,17 +36,13 @@ // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
 
-
     // enable / disable watching file and executing tests whenever any file changes
     autoWatch: false,
 
-
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: [
-      process.env.TRAVIS === "true" ? 'Chrome_travis_ci' : 'Chrome'
-    ],
+    browsers: [process.env.TRAVIS === "true" ? "Chrome_travis_ci" : "Chrome"],
 
     customLaunchers: {
       Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
+        base: "Chrome",
+        flags: ["--no-sandbox"]
       }
@@ -63,0 +49,0 @@ },

package.json

 {
   "name": "react-visibility-sensor",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Sensor component for React that notifies you when it goes in or out of the window viewport.",
@@ -34,2 +34,3 @@ "main": "dist/visibility-sensor.js",
     "gh-pages": "^2.0.1",
+    "husky": "^1.1.2",
     "karma": "^3.0.0",
@@ -39,3 +40,5 @@ "karma-chrome-launcher": "^2.2.0",
     "karma-phantomjs-launcher": "^1.0.4",
+    "lint-staged": "^7.3.0",
     "mocha": "^5.2.0",
+    "prettier": "1.14.3",
     "react": "^16.4.2",
@@ -54,3 +57,14 @@ "react-dom": "^16.4.2",
     "prop-types": "^15.6.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

README.md

@@ -21,4 +21,4 @@ React Visibility Sensor
 
-- Plain: <https://unpkg.com/react-visibility-sensor@5.0.0/dist/visibility-sensor.js>
-- Minified <https://unpkg.com/react-visibility-sensor@5.0.0/dist/visibility-sensor.min.js>
+- Plain: <https://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.js>
+- Minified <https://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.min.js>
 
@@ -25,0 +25,0 @@ Take a look at the [umd example](./example-umd/) to see this in action

testconf.js

 // karma.conf.js
 module.exports = function(config) {
   config.set({
-    frameworks: ['mocha'],
+    frameworks: ["mocha"],
     preprocessors: {
-      '**/*.jsx': ['jsx']
+      "**/*.jsx": ["jsx"]
     },
-    browsers: ['Chrome']
+    browsers: ["Chrome"]
   });
 };

tests/visibility-sensor-spec.jsx

@@ -1,15 +0,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import assert from 'assert';
-import VisibilitySensor from '../visibility-sensor';
+import React from "react";
+import ReactDOM from "react-dom";
+import assert from "assert";
+import VisibilitySensor from "../visibility-sensor";
 
-describe('VisibilitySensor', function () {
+describe("VisibilitySensor", function() {
   var node;
 
-  beforeEach(function () {
-    node = document.createElement('div');
+  beforeEach(function() {
+    node = document.createElement("div");
     document.body.appendChild(node);
   });
 
-  afterEach(function () {
+  afterEach(function() {
     ReactDOM.unmountComponentAtNode(node);
@@ -19,14 +19,22 @@ document.body.removeChild(node);
 
-  it('should notify of changes to visibility when parent moves', function (done) {
+  it("should notify of changes to visibility when parent moves", function(
+    done
+  ) {
     var firstTime = true;
-    var onChange = function (isVisible) {
+    var onChange = function(isVisible) {
       // by default we expect the sensor to be visible
       if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
-        node.setAttribute('style', 'position:absolute; width:100px; left:-101px');
-      }
-      // after moving the sensor it should be not visible anymore
-      else {
-        assert.equal(isVisible, false, 'Component has moved out of the visible viewport');
+        assert.equal(isVisible, true, "Component starts out visible");
+        node.setAttribute(
+          "style",
+          "position:absolute; width:100px; left:-101px"
+        );
+      } else {
+        // after moving the sensor it should be not visible anymore
+        assert.equal(
+          isVisible,
+          false,
+          "Component has moved out of the visible viewport"
+        );
         done();
@@ -37,4 +45,4 @@ }
     var element = (
-      <VisibilitySensor onChange={onChange} intervalDelay={10} >
-        <div style={{ height: '10px', width: '10px'}} />
+      <VisibilitySensor onChange={onChange} intervalDelay={10}>
+        <div style={{ height: "10px", width: "10px" }} />
       </VisibilitySensor>
@@ -46,15 +54,20 @@ );
 
-  it('should notify of changes to visibility when user scrolls', function (done) {
+  it("should notify of changes to visibility when user scrolls", function(
+    done
+  ) {
     var firstTime = true;
-    var onChange = function (isVisible) {
+    var onChange = function(isVisible) {
       // by default we expect the sensor to be visible
       if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
+        assert.equal(isVisible, true, "Component starts out visible");
 
-        window.scrollTo(0,1000);
-      }
-      // after moving the sensor it should be not visible anymore
-      else {
-        assert.equal(isVisible, false, 'Component has moved out of the visible viewport');
+        window.scrollTo(0, 1000);
+      } else {
+        // after moving the sensor it should be not visible anymore
+        assert.equal(
+          isVisible,
+          false,
+          "Component has moved out of the visible viewport"
+        );
         done();
@@ -65,5 +78,10 @@ }
     var element = (
-      <div style={{height: '5000px'}}>
-        <VisibilitySensor scrollCheck scrollDelay={10} onChange={onChange} intervalCheck={false} >
-          <div style={{ height: '10px', width: '10px'}} />
+      <div style={{ height: "5000px" }}>
+        <VisibilitySensor
+          scrollCheck
+          scrollDelay={10}
+          onChange={onChange}
+          intervalCheck={false}
+        >
+          <div style={{ height: "10px", width: "10px" }} />
         </VisibilitySensor>
@@ -76,15 +94,15 @@ </div>
 
-  it('should notify of changes to visibility when child moves', function (done) {
+  it("should notify of changes to visibility when child moves", function(done) {
     var firstTime = true;
     var initialStyle = {
-      height: '10px',
-      width: '10px',
+      height: "10px",
+      width: "10px"
     };
-    var onChange = function (isVisible) {
+    var onChange = function(isVisible) {
       // by default we expect the sensor to be visible
       if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
+        assert.equal(isVisible, true, "Component starts out visible");
         const style = {
-          position: 'absolute',
+          position: "absolute",
           width: 100,
@@ -94,6 +112,9 @@ left: -101
         ReactDOM.render(getElement(style), node);
-      }
-      // after moving the sensor it should be not visible anymore
-      else {
-        assert.equal(isVisible, false, 'Component has moved out of the visible viewport');
+      } else {
+        // after moving the sensor it should be not visible anymore
+        assert.equal(
+          isVisible,
+          false,
+          "Component has moved out of the visible viewport"
+        );
         done();
@@ -115,6 +136,5 @@ }
 
-
-  it('should notify of changes to visibility', function (done) {
-    var onChange = function (isVisible) {
-      assert.equal(isVisible, true, 'Component starts out visible');
+  it("should notify of changes to visibility", function(done) {
+    var onChange = function(isVisible) {
+      assert.equal(isVisible, true, "Component starts out visible");
       done();
@@ -124,4 +144,4 @@ };
     var element = (
-      <VisibilitySensor onChange={onChange} >
-        <div style={{ height: '10px', width: '10px'}} />
+      <VisibilitySensor onChange={onChange}>
+        <div style={{ height: "10px", width: "10px" }} />
       </VisibilitySensor>
@@ -133,10 +153,10 @@ );
 
-  it('should not notify when deactivated', function (done) {
+  it("should not notify when deactivated", function(done) {
     var wasCallbackCalled = false;
-    var onChange = function (isVisible) {
+    var onChange = function(isVisible) {
       wasCallbackCalled = true;
     };
 
-    setTimeout(function () {
-      assert(!wasCallbackCalled, 'onChange callback should not be called');
+    setTimeout(function() {
+      assert(!wasCallbackCalled, "onChange callback should not be called");
       done();
@@ -152,41 +172,67 @@ }, 20);
 
-  it('should clear interval and debounceCheck when deactivated', function () {
-    var onChange = function () {};
+  it("should clear interval and debounceCheck when deactivated", function() {
+    var onChange = function() {};
 
     var element1 = (
-      <VisibilitySensor active={true} onChange={onChange} scrollCheck resizeCheck />
+      <VisibilitySensor
+        active={true}
+        onChange={onChange}
+        scrollCheck
+        resizeCheck
+      />
     );
 
     var element2 = (
-      <VisibilitySensor active={false} onChange={onChange} scrollCheck resizeCheck />
+      <VisibilitySensor
+        active={false}
+        onChange={onChange}
+        scrollCheck
+        resizeCheck
+      />
     );
 
     var component1 = ReactDOM.render(element1, node);
-    assert(component1.interval, 'interval should be set');
-    assert(component1.debounceCheck, 'debounceCheck should be set');
-    assert(component1.debounceCheck.scroll, 'debounceCheck.scroll should be set');
-    assert(component1.debounceCheck.resize, 'debounceCheck.scroll should be set');
+    assert(component1.interval, "interval should be set");
+    assert(component1.debounceCheck, "debounceCheck should be set");
+    assert(
+      component1.debounceCheck.scroll,
+      "debounceCheck.scroll should be set"
+    );
+    assert(
+      component1.debounceCheck.resize,
+      "debounceCheck.scroll should be set"
+    );
 
     var component2 = ReactDOM.render(element2, node);
-    assert(!component2.interval, 'interval should not be set');
-    assert(!component2.debounceCheck, 'debounceCheck should not be set');
+    assert(!component2.interval, "interval should not be set");
+    assert(!component2.debounceCheck, "debounceCheck should not be set");
   });
 
-  it('should work when using offset prop and moving to outside of offset area', function (done) {
+  it("should work when using offset prop and moving to outside of offset area", function(
+    done
+  ) {
     var firstTime = true;
-    node.setAttribute('style', 'position:absolute; top:51px');
-    var onChange = function (isVisible) {
-      if(firstTime) {
+    node.setAttribute("style", "position:absolute; top:51px");
+    var onChange = function(isVisible) {
+      if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
-        node.setAttribute('style', 'position:absolute; top:49px');
+        assert.equal(isVisible, true, "Component starts out visible");
+        node.setAttribute("style", "position:absolute; top:49px");
       } else {
-        assert.equal(isVisible, false, 'Component has moved out of offset area');
+        assert.equal(
+          isVisible,
+          false,
+          "Component has moved out of offset area"
+        );
         done();
       }
-    }
+    };
 
     var element = (
-      <VisibilitySensor onChange={onChange} offset={{top:50}} intervalDelay={10} >
-        <div style={{ height: '10px', width: '10px'}} />
+      <VisibilitySensor
+        onChange={onChange}
+        offset={{ top: 50 }}
+        intervalDelay={10}
+      >
+        <div style={{ height: "10px", width: "10px" }} />
       </VisibilitySensor>
@@ -198,19 +244,27 @@ );
 
-  it('should be backwards-compatible with old offset config', function (done) {
+  it("should be backwards-compatible with old offset config", function(done) {
     var firstTime = true;
-    node.setAttribute('style', 'position:absolute; top:51px');
-    var onChange = function (isVisible) {
-      if(firstTime) {
+    node.setAttribute("style", "position:absolute; top:51px");
+    var onChange = function(isVisible) {
+      if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
-        node.setAttribute('style', 'position:absolute; top:49px');
+        assert.equal(isVisible, true, "Component starts out visible");
+        node.setAttribute("style", "position:absolute; top:49px");
       } else {
-        assert.equal(isVisible, false, 'Component has moved out of offset area');
+        assert.equal(
+          isVisible,
+          false,
+          "Component has moved out of offset area"
+        );
         done();
       }
-    }
+    };
 
     var element = (
-      <VisibilitySensor onChange={onChange} offset={{direction: 'top', value: 50}} intervalDelay={10} >
-        <div style={{ height: '10px', width: '10px'}} />
+      <VisibilitySensor
+        onChange={onChange}
+        offset={{ direction: "top", value: 50 }}
+        intervalDelay={10}
+      >
+        <div style={{ height: "10px", width: "10px" }} />
       </VisibilitySensor>
@@ -222,19 +276,29 @@ );
 
-  it('should work when using offset prop and moving to inside of offset area', function (done) {
+  it("should work when using offset prop and moving to inside of offset area", function(
+    done
+  ) {
     var firstTime = true;
-    node.setAttribute('style', 'position:absolute; top:49px');
-    var onChange = function (isVisible) {
-      if(firstTime) {
+    node.setAttribute("style", "position:absolute; top:49px");
+    var onChange = function(isVisible) {
+      if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, false, 'Component starts out invisible');
-        node.setAttribute('style', 'position:absolute; top:51px');
+        assert.equal(isVisible, false, "Component starts out invisible");
+        node.setAttribute("style", "position:absolute; top:51px");
       } else {
-        assert.equal(isVisible, true, 'Component has moved inside of offset area');
+        assert.equal(
+          isVisible,
+          true,
+          "Component has moved inside of offset area"
+        );
         done();
       }
-    }
+    };
 
     var element = (
-      <VisibilitySensor onChange={onChange} offset={{top:50}} intervalDelay={10} >
-        <div style={{ height: '10px', width: '10px'}} />
+      <VisibilitySensor
+        onChange={onChange}
+        offset={{ top: 50 }}
+        intervalDelay={10}
+      >
+        <div style={{ height: "10px", width: "10px" }} />
       </VisibilitySensor>
@@ -246,19 +310,29 @@ );
 
-  it('should work when using negative offset prop and moving to outside of viewport', function (done) {
+  it("should work when using negative offset prop and moving to outside of viewport", function(
+    done
+  ) {
     var firstTime = true;
-    node.setAttribute('style', 'position:absolute; top:-49px');
-    var onChange = function (isVisible) {
-      if(firstTime) {
+    node.setAttribute("style", "position:absolute; top:-49px");
+    var onChange = function(isVisible) {
+      if (firstTime) {
         firstTime = false;
-        assert.equal(isVisible, true, 'Component starts out visible');
-        node.setAttribute('style', 'position:absolute; top:-51px');
+        assert.equal(isVisible, true, "Component starts out visible");
+        node.setAttribute("style", "position:absolute; top:-51px");
       } else {
-        assert.equal(isVisible, false, 'Component has moved outside of viewport and visible area');
+        assert.equal(
+          isVisible,
+          false,
+          "Component has moved outside of viewport and visible area"
+        );
         done();
       }
-    }
+    };
 
     var element = (
-      <VisibilitySensor onChange={onChange} offset={{top:-50}} intervalDelay={10} >
-        <div style={{ height: '10px', width: '10px'}} />
+      <VisibilitySensor
+        onChange={onChange}
+        offset={{ top: -50 }}
+        intervalDelay={10}
+      >
+        <div style={{ height: "10px", width: "10px" }} />
       </VisibilitySensor>
@@ -270,19 +344,23 @@ );
 
-  it('should call child function with state', function (done) {
+  it("should call child function with state", function(done) {
     var wasChildrenCalled = false;
-    var children = function (props) {
+    var children = function(props) {
       wasChildrenCalled = true;
-      assert('isVisible' in props, 'children should be called with isVisible prop');
-      assert('visibilityRect' in props, 'children should be called with visibilityRect prop');
+      assert(
+        "isVisible" in props,
+        "children should be called with isVisible prop"
+      );
+      assert(
+        "visibilityRect" in props,
+        "children should be called with visibilityRect prop"
+      );
       return <div />;
     };
 
-    setTimeout(function () {
-      assert(wasChildrenCalled, 'children should be called');
+    setTimeout(function() {
+      assert(wasChildrenCalled, "children should be called");
       done();
     }, 200);
 
-    var element = (
-      <VisibilitySensor>{children}</VisibilitySensor>
-    );
+    var element = <VisibilitySensor>{children}</VisibilitySensor>;
 
@@ -292,7 +370,7 @@ ReactDOM.render(element, node);
 
-  it('should not return visible if it has no size', function (done) {
+  it("should not return visible if it has no size", function(done) {
     var firstTime = true;
-    var onChange = function (isVisible) {
+    var onChange = function(isVisible) {
       if (firstTime) {
-        assert.equal(isVisible, false, 'Component is not visible');
+        assert.equal(isVisible, false, "Component is not visible");
         done();
@@ -303,4 +381,4 @@ }
     var element = (
-      <VisibilitySensor onChange={onChange} >
-        <div style={{ height: '0px', width: '0px' }} />
+      <VisibilitySensor onChange={onChange}>
+        <div style={{ height: "0px", width: "0px" }} />
       </VisibilitySensor>
@@ -312,7 +390,7 @@ );
 
-  it('should not return visible if the sensor is hidden', function (done) {
+  it("should not return visible if the sensor is hidden", function(done) {
     var firstTime = true;
-    var onChange = function (isVisible) {
+    var onChange = function(isVisible) {
       if (firstTime) {
-        assert.equal(isVisible, false, 'Component is not visible');
+        assert.equal(isVisible, false, "Component is not visible");
         done();
@@ -323,5 +401,5 @@ }
     var element = (
-      <div style={{ display: 'none'}} >
-        <VisibilitySensor onChange={onChange} >
-          <div style={{ height: '10px', width: '10px'}} />
+      <div style={{ display: "none" }}>
+        <VisibilitySensor onChange={onChange}>
+          <div style={{ height: "10px", width: "10px" }} />
         </VisibilitySensor>
@@ -328,0 +406,0 @@ </div>

visibility-sensor.js

@@ -1,9 +0,9 @@
-'use strict';
+"use strict";
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import isVisibleWithOffset from './lib/is-visible-with-offset';
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+import isVisibleWithOffset from "./lib/is-visible-with-offset";
 
-function normalizeRect (rect) {
+function normalizeRect(rect) {
   if (rect.width === undefined) {
@@ -20,4 +20,2 @@ rect.width = rect.right - rect.left;
 
-//let containmentPropType = typeof window !== 'undefined' ? PropTypes.instanceOf(window.Element) : PropTypes.any;
-
 export default class VisibilitySensor extends React.Component {
@@ -47,3 +45,3 @@ static defaultProps = {
       PropTypes.bool,
-      PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+      PropTypes.oneOf(["top", "right", "bottom", "left"])
     ]),
@@ -60,3 +58,3 @@ delayedCall: PropTypes.bool,
       PropTypes.shape({
-        direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+        direction: PropTypes.oneOf(["top", "right", "bottom", "left"]),
         value: PropTypes.number
@@ -73,9 +71,9 @@ })
     intervalDelay: PropTypes.number,
-    containment: typeof window !== 'undefined' ? PropTypes.instanceOf(window.Element) : PropTypes.any,
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.func,
-    ]),
-    minTopValue: PropTypes.number,
-  }
+    containment:
+      typeof window !== "undefined"
+        ? PropTypes.instanceOf(window.Element)
+        : PropTypes.any,
+    children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    minTopValue: PropTypes.number
+  };
 
@@ -120,3 +118,3 @@ constructor(props) {
     return this.props.containment || window;
-  }
+  };
 
@@ -154,3 +152,3 @@ addEventListener = (target, event, delay, throttle) => {
         return timeout;
-      },
+      }
     };
@@ -160,6 +158,8 @@
     this.debounceCheck[event] = info;
-  }
+  };
 
   startWatching = () => {
-    if (this.debounceCheck || this.interval) { return; }
+    if (this.debounceCheck || this.interval) {
+      return;
+    }
 
@@ -173,3 +173,3 @@ if (this.props.intervalCheck) {
         this.getContainer(),
-        'scroll',
+        "scroll",
         this.props.scrollDelay,
@@ -183,3 +183,3 @@ this.props.scrollThrottle
         window,
-        'resize',
+        "resize",
         this.props.resizeDelay,
@@ -192,3 +192,3 @@ this.props.resizeThrottle
     !this.props.delayedCall && this.check();
-  }
+  };
 
@@ -204,3 +204,4 @@ stopWatching = () => {
           debounceInfo.target.removeEventListener(
-            debounceEvent, debounceInfo.fn
+            debounceEvent,
+            debounceInfo.fn
           );
@@ -214,6 +215,8 @@
 
-    if (this.interval) { this.interval = clearInterval(this.interval); }
-  }
+    if (this.interval) {
+      this.interval = clearInterval(this.interval);
+    }
+  };
 
-  roundRectDown (rect) {
+  roundRectDown(rect) {
     return {
@@ -223,3 +226,3 @@ top: Math.floor(rect.top),
       bottom: Math.floor(rect.bottom),
-      right: Math.floor(rect.right),
+      right: Math.floor(rect.right)
     };
@@ -249,4 +252,4 @@ }
         bottom: containmentDOMRect.bottom,
-        right: containmentDOMRect.right,
-      }
+        right: containmentDOMRect.right
+      };
     } else {
@@ -263,3 +266,3 @@ containmentRect = {
     const offset = this.props.offset || {};
-    const hasValidOffset = typeof offset === 'object';
+    const hasValidOffset = typeof offset === "object";
 
@@ -283,3 +286,3 @@ if (hasValidOffset) {
 
-    let isVisible = (
+    let isVisible =
       hasSize &&
@@ -289,4 +292,3 @@ visibilityRect.top &&
       visibilityRect.bottom &&
-      visibilityRect.right
-    );
+      visibilityRect.right;
 
@@ -296,8 +298,10 @@ // check for partial visibility
       let partialVisible =
-          rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top &&
-          rect.left <= containmentRect.right && rect.right >= containmentRect.left;
+        rect.top <= containmentRect.bottom &&
+        rect.bottom >= containmentRect.top &&
+        rect.left <= containmentRect.right &&
+        rect.right >= containmentRect.left;
 
       // account for partial visibility on a single edge
-      if (typeof this.props.partialVisibility === 'string') {
-        partialVisible = visibilityRect[this.props.partialVisibility]
+      if (typeof this.props.partialVisibility === "string") {
+        partialVisible = visibilityRect[this.props.partialVisibility];
       }
@@ -308,10 +312,17 @@
       isVisible = this.props.minTopValue
-        ? partialVisible && rect.top <= (containmentRect.bottom - this.props.minTopValue)
-        : partialVisible
+        ? partialVisible &&
+          rect.top <= containmentRect.bottom - this.props.minTopValue
+        : partialVisible;
     }
 
     // Deprecated options for calculating offset.
-    if (typeof offset.direction === 'string' &&
-      typeof offset.value === 'number') {
-      console.warn('[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }', offset.direction, offset.value)
+    if (
+      typeof offset.direction === "string" &&
+      typeof offset.value === "number"
+    ) {
+      console.warn(
+        "[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }",
+        offset.direction,
+        offset.value
+      );
 
@@ -333,3 +344,3 @@ isVisible = isVisibleWithOffset(offset, rect, containmentRect);
     return state;
-  }
+  };
 
@@ -340,3 +351,3 @@ render() {
         isVisible: this.state.isVisible,
-        visibilityRect: this.state.visibilityRect,
+        visibilityRect: this.state.visibilityRect
       });
@@ -343,0 +354,0 @@ }

webpack.config.js

@@ -1,6 +0,5 @@
-const path = require('path');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const path = require("path");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
 module.exports = env => {
-
   let entry;
@@ -11,38 +10,38 @@ let output;
     react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'React',
-      root: 'React'
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "React",
+      root: "React"
     },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'ReactDOM',
-      root: 'ReactDOM'
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "ReactDOM",
+      root: "ReactDOM"
     }
   };
 
-  if (env === 'production') {
-
+  if (env === "production") {
     entry = {
-      'visibility-sensor': './visibility-sensor.js',
-      'visibility-sensor.min': './visibility-sensor.js'
+      "visibility-sensor": "./visibility-sensor.js",
+      "visibility-sensor.min": "./visibility-sensor.js"
     };
 
     output = {
-      path: path.resolve(__dirname, 'dist'),
-      filename: '[name].js',
-      library: 'react-visibility-sensor',
-      libraryTarget: 'umd'
+      path: path.resolve(__dirname, "dist"),
+      filename: "[name].js",
+      library: "react-visibility-sensor",
+      libraryTarget: "umd",
+      globalObject: "this"
     };
   }
 
-  if (env === 'test') {
+  if (env === "test") {
     entry = {
-      'bundle': './tests/visibility-sensor-spec.jsx'
+      bundle: "./tests/visibility-sensor-spec.jsx"
     };
 
     output = {
-      path: path.resolve(__dirname, 'tests'),
-      filename: '[name].js'
+      path: path.resolve(__dirname, "tests"),
+      filename: "[name].js"
     };
@@ -54,10 +53,10 @@
 
-  if (env === 'example') {
+  if (env === "example") {
     entry = {
-      'bundle': './example/main.js'
+      bundle: "./example/main.js"
     };
 
     output = {
-      path: path.resolve(__dirname, 'example/dist'),
-      filename: '[name].js'
+      path: path.resolve(__dirname, "example/dist"),
+      filename: "[name].js"
     };
@@ -70,3 +69,3 @@
   return {
-    mode: 'production',
+    mode: "production",
     entry: entry,
@@ -94,9 +93,9 @@ output: output,
       alias: {
-        'react': path.resolve(__dirname, './node_modules/react'),
-        'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+        react: path.resolve(__dirname, "./node_modules/react"),
+        "react-dom": path.resolve(__dirname, "./node_modules/react-dom")
       },
-      extensions: ['.js', '.jsx']
+      extensions: [".js", ".jsx"]
     },
     externals: externals
-  }
+  };
 };

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

482897

increased by27.28%

Lines of code

11375

increased by126.01%

Worsened metrics

Dev dependency count

20

increased by17.65%

Number of package files

22

decreased by-4.35%

No dependency changes