react-visibility-sensor - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

dist/visibility-sensor.js

@@ -22,4 +22,6 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.VisibilitySensor=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
     delay: React.PropTypes.number,
+    delayedCall: React.PropTypes.bool,
     containment: containmentPropType,
-    children: React.PropTypes.element
+    children: React.PropTypes.element,
+    minTopValue: React.PropTypes.number
   },
@@ -31,3 +33,5 @@
       partialVisibility: false,
+      minTopValue: 0,
       delay: 1000,
+      delayedCall: false,
       containment: null,
@@ -67,3 +71,4 @@ children: React.createElement('span')
     this.interval = setInterval(this.check, this.props.delay);
-    this.check();
+    // if dont need delayed call, check on load ( before the first interval fires )
+    !this.props.delayedCall && this.check();
   },
@@ -102,22 +107,30 @@
     var fullVisible = (
-        visibilityRect.top &&
-        visibilityRect.left &&
-        visibilityRect.bottom &&
-        visibilityRect.right
+      visibilityRect.top &&
+      visibilityRect.left &&
+      visibilityRect.bottom &&
+      visibilityRect.right
     );
 
-    var partialVertical =
-        (rect.top >= containmentRect.top && rect.top <= containmentRect.bottom)
-     || (rect.bottom >= containmentRect.top && rect.bottom <= containmentRect.bottom);
+    var isVisible = fullVisible;
 
-    var partialHorizontal =
-        (rect.left >= containmentRect.left && rect.left <= containmentRect.right)
-     || (rect.right >= containmentRect.left && rect.right <= containmentRect.right);
+    // check for partial visibility
+    if (this.props.partialVisibility) {
+      var partialVertical =
+          (rect.top >= containmentRect.top && rect.top <= containmentRect.bottom)
+          || (rect.bottom >= containmentRect.top && rect.bottom <= containmentRect.bottom)
+          || (rect.top <= containmentRect.top && rect.bottom >= containmentRect.bottom);
 
-    var partialVisible = partialVertical && partialHorizontal;
+      var partialHorizontal =
+          (rect.left >= containmentRect.left && rect.left <= containmentRect.right)
+          || (rect.right >= containmentRect.left && rect.right <= containmentRect.right);
 
-    var isVisible = this.props.partialVisibility
-      ? partialVisible
-      : fullVisible;
+      var partialVisible = partialVertical && partialHorizontal;
 
+      // if we have minimum top visibility set by props, lets check, if it meets the passed value
+      // so if for instance element is at least 200px in viewport, then show it.
+      isVisible = this.props.minTopValue
+        ? partialVisible && rect.top <= (containmentRect.bottom - this.props.minTopValue)
+        : partialVisible
+    }
+
     var state = this.state
@@ -124,0 +137,0 @@ // notify the parent when the value changes

dist/visibility-sensor.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.VisibilitySensor=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){"use strict";var React=typeof window!=="undefined"?window["React"]:typeof global!=="undefined"?global["React"]:null;var ReactDOM=typeof window!=="undefined"?window["ReactDOM"]:typeof global!=="undefined"?global["ReactDOM"]:null;var containmentPropType=React.PropTypes.any;if(typeof window!=="undefined"){containmentPropType=React.PropTypes.instanceOf(Element)}module.exports=React.createClass({displayName:"VisibilitySensor",propTypes:{onChange:React.PropTypes.func.isRequired,active:React.PropTypes.bool,partialVisibility:React.PropTypes.bool,delay:React.PropTypes.number,containment:containmentPropType,children:React.PropTypes.element},getDefaultProps:function(){return{active:true,partialVisibility:false,delay:1e3,containment:null,children:React.createElement("span")}},getInitialState:function(){return{isVisible:null,visibilityRect:{}}},componentDidMount:function(){if(this.props.active){this.startWatching()}},componentWillUnmount:function(){this.stopWatching()},componentWillReceiveProps:function(nextProps){if(nextProps.active){this.setState(this.getInitialState());this.startWatching()}else{this.stopWatching()}},startWatching:function(){if(this.interval){return}this.interval=setInterval(this.check,this.props.delay);this.check()},stopWatching:function(){this.interval=clearInterval(this.interval)},check:function(){var el=ReactDOM.findDOMNode(this);var rect=el.getBoundingClientRect();var containmentRect;if(this.props.containment){containmentRect=this.props.containment.getBoundingClientRect()}else{containmentRect={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth}}var visibilityRect={top:rect.top>=containmentRect.top,left:rect.left>=containmentRect.left,bottom:rect.bottom<=containmentRect.bottom,right:rect.right<=containmentRect.right};var fullVisible=visibilityRect.top&&visibilityRect.left&&visibilityRect.bottom&&visibilityRect.right;var partialVertical=rect.top>=containmentRect.top&&rect.top<=containmentRect.bottom||rect.bottom>=containmentRect.top&&rect.bottom<=containmentRect.bottom;var partialHorizontal=rect.left>=containmentRect.left&&rect.left<=containmentRect.right||rect.right>=containmentRect.left&&rect.right<=containmentRect.right;var partialVisible=partialVertical&&partialHorizontal;var isVisible=this.props.partialVisibility?partialVisible:fullVisible;var state=this.state;if(this.state.isVisible!==isVisible){state={isVisible:isVisible,visibilityRect:visibilityRect};this.setState(state);this.props.onChange(isVisible,visibilityRect)}return state},render:function(){return React.Children.only(this.props.children)}})}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.VisibilitySensor=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){"use strict";var React=typeof window!=="undefined"?window["React"]:typeof global!=="undefined"?global["React"]:null;var ReactDOM=typeof window!=="undefined"?window["ReactDOM"]:typeof global!=="undefined"?global["ReactDOM"]:null;var containmentPropType=React.PropTypes.any;if(typeof window!=="undefined"){containmentPropType=React.PropTypes.instanceOf(Element)}module.exports=React.createClass({displayName:"VisibilitySensor",propTypes:{onChange:React.PropTypes.func.isRequired,active:React.PropTypes.bool,partialVisibility:React.PropTypes.bool,delay:React.PropTypes.number,delayedCall:React.PropTypes.bool,containment:containmentPropType,children:React.PropTypes.element,minTopValue:React.PropTypes.number},getDefaultProps:function(){return{active:true,partialVisibility:false,minTopValue:0,delay:1e3,delayedCall:false,containment:null,children:React.createElement("span")}},getInitialState:function(){return{isVisible:null,visibilityRect:{}}},componentDidMount:function(){if(this.props.active){this.startWatching()}},componentWillUnmount:function(){this.stopWatching()},componentWillReceiveProps:function(nextProps){if(nextProps.active){this.setState(this.getInitialState());this.startWatching()}else{this.stopWatching()}},startWatching:function(){if(this.interval){return}this.interval=setInterval(this.check,this.props.delay);!this.props.delayedCall&&this.check()},stopWatching:function(){this.interval=clearInterval(this.interval)},check:function(){var el=ReactDOM.findDOMNode(this);var rect=el.getBoundingClientRect();var containmentRect;if(this.props.containment){containmentRect=this.props.containment.getBoundingClientRect()}else{containmentRect={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth}}var visibilityRect={top:rect.top>=containmentRect.top,left:rect.left>=containmentRect.left,bottom:rect.bottom<=containmentRect.bottom,right:rect.right<=containmentRect.right};var fullVisible=visibilityRect.top&&visibilityRect.left&&visibilityRect.bottom&&visibilityRect.right;var isVisible=fullVisible;if(this.props.partialVisibility){var partialVertical=rect.top>=containmentRect.top&&rect.top<=containmentRect.bottom||rect.bottom>=containmentRect.top&&rect.bottom<=containmentRect.bottom||rect.top<=containmentRect.top&&rect.bottom>=containmentRect.bottom;var partialHorizontal=rect.left>=containmentRect.left&&rect.left<=containmentRect.right||rect.right>=containmentRect.left&&rect.right<=containmentRect.right;var partialVisible=partialVertical&&partialHorizontal;isVisible=this.props.minTopValue?partialVisible&&rect.top<=containmentRect.bottom-this.props.minTopValue:partialVisible}var state=this.state;if(this.state.isVisible!==isVisible){state={isVisible:isVisible,visibilityRect:visibilityRect};this.setState(state);this.props.onChange(isVisible,visibilityRect)}return state},render:function(){return React.Children.only(this.props.children)}})}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}]},{},[1])(1)});

example-umd/main.js

@@ -18,10 +18,14 @@ 'use strict';
     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},
-          React.createElement("div", {className: "sensor"})
-        ),
-        React.createElement("div", {className: "after"})
-      )
+      <div>
+        <p className='msg'>{this.state.msg}</p>
+        <div className='before'></div>
+        <VisibilitySensor
+          containment={this.props.containment}
+          onChange={this.onChange}
+          minTopValue={this.props.minTopValue}
+          partialVisibility={this.props.partialVisibility}>
+          <div className='sensor' />
+        </VisibilitySensor>
+        <div className='after'></div>
+      </div>
     );
@@ -37,2 +41,6 @@ }
 container.scrollLeft = 320;
-ReactDOM.render(React.createElement(Example, { containment: container }), elem);
+ReactDOM.render(React.createElement(Example, {
+  containment: container,
+  minTopValue: 10,
+  partialVisibility: true
+}), elem);

example/main.js

@@ -25,3 +25,7 @@ 'use strict';
         <div className='before'></div>
-        <VisibilitySensor containment={this.props.containment} onChange={this.onChange}>
+        <VisibilitySensor
+          containment={this.props.containment}
+          onChange={this.onChange}
+          minTopValue={this.props.minTopValue}
+          partialVisibility={this.props.partialVisibility}>
           <div className='sensor' />
@@ -41,2 +45,6 @@ </VisibilitySensor>
 container.scrollLeft = 320;
-ReactDOM.render(React.createElement(Example, { containment: container }), elem);
+ReactDOM.render(React.createElement(Example, {
+  containment: container,
+  minTopValue: 10,
+  partialVisibility: true
+}), elem);

package.json

 {
   "name": "react-visibility-sensor",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Sensor component for React that notifies you when it goes in or out of the window viewport.",
@@ -5,0 +5,0 @@ "main": "visibility-sensor.js",

README.md

@@ -57,4 +57,6 @@ React Visibility Sensor
 - `partialVisibility`: (default `false`) consider element visible if only part of it is visible.
+- `minTopValue`: (default `false`) consider element visible if only part of it is visible and a minimum amount of pixels could be set, so if at least 100px are in viewport, we mark element as visible.
 - `delay`: (default `1000`) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.
 - `containment`: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.
+- `delayedCall`: (default `false`) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )
 
@@ -61,0 +63,0 @@ Thanks

visibility-sensor.js

@@ -20,4 +20,6 @@ 'use strict';
     delay: React.PropTypes.number,
+    delayedCall: React.PropTypes.bool,
     containment: containmentPropType,
-    children: React.PropTypes.element
+    children: React.PropTypes.element,
+    minTopValue: React.PropTypes.number
   },
@@ -29,3 +31,5 @@
       partialVisibility: false,
+      minTopValue: 0,
       delay: 1000,
+      delayedCall: false,
       containment: null,
@@ -65,3 +69,4 @@ children: React.createElement('span')
     this.interval = setInterval(this.check, this.props.delay);
-    this.check();
+    // if dont need delayed call, check on load ( before the first interval fires )
+    !this.props.delayedCall && this.check();
   },
@@ -100,22 +105,30 @@
     var fullVisible = (
-        visibilityRect.top &&
-        visibilityRect.left &&
-        visibilityRect.bottom &&
-        visibilityRect.right
+      visibilityRect.top &&
+      visibilityRect.left &&
+      visibilityRect.bottom &&
+      visibilityRect.right
     );
 
-    var partialVertical =
-        (rect.top >= containmentRect.top && rect.top <= containmentRect.bottom)
-     || (rect.bottom >= containmentRect.top && rect.bottom <= containmentRect.bottom);
+    var isVisible = fullVisible;
 
-    var partialHorizontal =
-        (rect.left >= containmentRect.left && rect.left <= containmentRect.right)
-     || (rect.right >= containmentRect.left && rect.right <= containmentRect.right);
+    // check for partial visibility
+    if (this.props.partialVisibility) {
+      var partialVertical =
+          (rect.top >= containmentRect.top && rect.top <= containmentRect.bottom)
+          || (rect.bottom >= containmentRect.top && rect.bottom <= containmentRect.bottom)
+          || (rect.top <= containmentRect.top && rect.bottom >= containmentRect.bottom);
 
-    var partialVisible = partialVertical && partialHorizontal;
+      var partialHorizontal =
+          (rect.left >= containmentRect.left && rect.left <= containmentRect.right)
+          || (rect.right >= containmentRect.left && rect.right <= containmentRect.right);
 
-    var isVisible = this.props.partialVisibility
-      ? partialVisible
-      : fullVisible;
+      var partialVisible = partialVertical && partialHorizontal;
 
+      // if we have minimum top visibility set by props, lets check, if it meets the passed value
+      // so if for instance element is at least 200px in viewport, then show it.
+      isVisible = this.props.minTopValue
+        ? partialVisible && rect.top <= (containmentRect.bottom - this.props.minTopValue)
+        : partialVisible
+    }
+
     var state = this.state
@@ -122,0 +135,0 @@ // notify the parent when the value changes

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

1500552

increased by0.26%

Lines of code

38033

increased by0.19%

Number of lines in readme file

76

increased by2.7%

No dependency changes