Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-visibility-sensor

Package Overview
Dependencies
Maintainers
3
Versions
53
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-visibility-sensor - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

visibility-sensor.js.orig

10

dist/visibility-sensor.js

@@ -20,3 +20,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){

active: React.PropTypes.bool,
partialVisibility: React.PropTypes.bool,
partialVisibility: React.PropTypes.oneOfType([
React.PropTypes.bool,
React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
]),
delay: React.PropTypes.number,

@@ -135,2 +138,7 @@ delayedCall: React.PropTypes.bool,

// account for partial visibility on a single edge
if (typeof this.props.partialVisibility === 'string') {
partialVisible = visibilityRect[this.props.partialVisibility]
}
// if we have minimum top visibility set by props, lets check, if it meets the passed value

@@ -137,0 +145,0 @@ // so if for instance element is at least 200px in viewport, then show it.

2

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,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;var containmentRect;if(!el){return this.state}rect=el.getBoundingClientRect();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||rect.left<=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)});
!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.oneOfType([React.PropTypes.bool,React.PropTypes.oneOf(["top","right","bottom","left"])]),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;var containmentRect;if(!el){return this.state}rect=el.getBoundingClientRect();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||rect.left<=containmentRect.left&&rect.right>=containmentRect.right;var partialVisible=partialVertical&&partialHorizontal;if(typeof this.props.partialVisibility==="string"){partialVisible=visibilityRect[this.props.partialVisibility]}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)});

2

package.json
{
"name": "react-visibility-sensor",
"version": "3.3.0",
"version": "3.4.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",

4

README.md

@@ -19,4 +19,4 @@ React Visibility Sensor

- Plain: <https://npmcdn.com/react-visibility-sensor@3.2.1/dist/visibility-sensor.js>
- Minified <https://npmcdn.com/react-visibility-sensor@3.2.1/dist/visibility-sensor.min.js>
- Plain: <https://npmcdn.com/react-visibility-sensor@3.3.0/dist/visibility-sensor.js>
- Minified <https://npmcdn.com/react-visibility-sensor@3.3.0/dist/visibility-sensor.min.js>

@@ -23,0 +23,0 @@ Take a look at the [umd example](./example-umd/) to see this in action

10

visibility-sensor.js

@@ -18,3 +18,6 @@ 'use strict';

active: React.PropTypes.bool,
partialVisibility: React.PropTypes.bool,
partialVisibility: React.PropTypes.oneOfType([
React.PropTypes.bool,
React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
]),
delay: React.PropTypes.number,

@@ -133,2 +136,7 @@ delayedCall: React.PropTypes.bool,

// account for partial visibility on a single edge
if (typeof this.props.partialVisibility === 'string') {
partialVisible = visibilityRect[this.props.partialVisibility]
}
// if we have minimum top visibility set by props, lets check, if it meets the passed value

@@ -135,0 +143,0 @@ // so if for instance element is at least 200px in viewport, then show it.

example/dist/bundle.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc