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

react-in-viewport

Package Overview
Dependencies
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-in-viewport - npm Package Compare versions

Comparing version 0.0.36 to 0.0.37

dist/__tests__/index.js

172

dist/es/index.js

@@ -1,39 +0,45 @@

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
"use strict";
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
exports.__esModule = true;
exports.default = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _react = _interopRequireWildcard(require("react"));
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
var _reactDom = require("react-dom");
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import hoistNonReactStatic from 'hoist-non-react-statics';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
if (typeof window !== 'undefined') {
// Polyfills for intersection-observer
require('intersection-observer'); // eslint-disable-line
}
var isStateless = function isStateless(TargetComponent) {
return typeof TargetComponent === 'function' && !(TargetComponent.prototype && TargetComponent.prototype.isReactComponent);
};
const isStateless = TargetComponent => typeof TargetComponent === 'function' && !(TargetComponent.prototype && TargetComponent.prototype.isReactComponent);
function handleViewport(TargetComponent) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { disconnectOnLeave: false };
function handleViewport(TargetComponent, options, config) {
if (options === void 0) {
options = {};
}
var InViewport = function (_Component) {
_inherits(InViewport, _Component);
if (config === void 0) {
config = {
disconnectOnLeave: false
};
}
function InViewport(props) {
_classCallCheck(this, InViewport);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.observer = null;
_this.node = null;
_this.state = {
class InViewport extends _react.Component {
constructor(props) {
super(props);
this.observer = null;
this.node = null;
this.state = {
inViewport: false,

@@ -43,17 +49,16 @@ enterCount: 0,

};
_this.intersected = false;
_this.handleIntersection = _this.handleIntersection.bind(_this);
_this.initIntersectionObserver = _this.initIntersectionObserver.bind(_this);
_this.setInnerRef = _this.setInnerRef.bind(_this);
_this.setRef = _this.setRef.bind(_this);
return _this;
this.intersected = false;
this.handleIntersection = this.handleIntersection.bind(this);
this.initIntersectionObserver = this.initIntersectionObserver.bind(this);
this.setInnerRef = this.setInnerRef.bind(this);
this.setRef = this.setRef.bind(this);
}
InViewport.prototype.componentDidMount = function componentDidMount() {
componentDidMount() {
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
this.initIntersectionObserver();
this.startObserver(this.node, this.observer);
};
}
InViewport.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
componentDidUpdate(prevProps, prevState) {
// reset observer on update, to fix race condition that when observer init,

@@ -64,8 +69,9 @@ // the element is not in viewport, such as in animation

this.observer.unobserve(this.node); // $FlowFixMe
this.observer.observe(this.node);
}
}
};
}
InViewport.prototype.initIntersectionObserver = function initIntersectionObserver() {
initIntersectionObserver() {
if (!this.observer) {

@@ -75,15 +81,15 @@ // $FlowFixMe

}
};
}
InViewport.prototype.componentWillUnmount = function componentWillUnmount() {
componentWillUnmount() {
this.stopObserver(this.node, this.observer);
};
}
InViewport.prototype.startObserver = function startObserver(node, observer) {
startObserver(node, observer) {
if (node && observer) {
observer.observe(node);
}
};
}
InViewport.prototype.stopObserver = function stopObserver(node, observer) {
stopObserver(node, observer) {
if (node && observer) {

@@ -94,16 +100,13 @@ observer.unobserve(node);

}
};
}
InViewport.prototype.handleIntersection = function handleIntersection(entries) {
var _props = this.props,
onEnterViewport = _props.onEnterViewport,
onLeaveViewport = _props.onLeaveViewport;
handleIntersection(entries) {
const _this$props = this.props,
onEnterViewport = _this$props.onEnterViewport,
onLeaveViewport = _this$props.onLeaveViewport;
const entry = entries[0] || {};
const isIntersecting = entry.isIntersecting,
intersectionRatio = entry.intersectionRatio;
const inViewport = typeof isIntersecting !== 'undefined' ? isIntersecting : intersectionRatio > 0; // enter
var entry = entries[0] || {};
var isIntersecting = entry.isIntersecting,
intersectionRatio = entry.intersectionRatio;
var inViewport = typeof isIntersecting !== 'undefined' ? isIntersecting : intersectionRatio > 0;
// enter
if (!this.intersected && inViewport) {

@@ -113,12 +116,13 @@ this.intersected = true;

this.setState({
inViewport: inViewport,
inViewport,
enterCount: this.state.enterCount + 1
});
return;
}
} // leave
// leave
if (this.intersected && !inViewport) {
this.intersected = false;
onLeaveViewport && onLeaveViewport();
if (config.disconnectOnLeave) {

@@ -128,15 +132,16 @@ // disconnect obsever on leave

}
this.setState({
inViewport: inViewport,
inViewport,
leaveCount: this.state.leaveCount + 1
});
}
};
}
InViewport.prototype.setRef = function setRef(node) {
setRef(node) {
// $FlowFixMe
this.node = findDOMNode(node);
};
this.node = (0, _reactDom.findDOMNode)(node);
}
InViewport.prototype.setInnerRef = function setInnerRef(node) {
setInnerRef(node) {
if (node && !this.node) {

@@ -146,21 +151,22 @@ // handle stateless

}
};
}
InViewport.prototype.render = function render() {
var _props2 = this.props,
onEnterViewport = _props2.onEnterViewport,
onLeaveViewport = _props2.onLeaveViewport,
otherProps = _objectWithoutProperties(_props2, ['onEnterViewport', 'onLeaveViewport']);
// pass ref to class and innerRef for stateless component
render() {
const _this$props2 = this.props,
onEnterViewport = _this$props2.onEnterViewport,
onLeaveViewport = _this$props2.onLeaveViewport,
otherProps = _objectWithoutPropertiesLoose(_this$props2, ["onEnterViewport", "onLeaveViewport"]); // pass ref to class and innerRef for stateless component
var _state = this.state,
inViewport = _state.inViewport,
enterCount = _state.enterCount,
leaveCount = _state.leaveCount;
var refProps = isStateless(TargetComponent) ? { innerRef: this.setInnerRef } : { ref: this.setRef };
return (
// $FlowFixMe
React.createElement(TargetComponent, _extends({}, otherProps, {
const _this$state = this.state,
inViewport = _this$state.inViewport,
enterCount = _this$state.enterCount,
leaveCount = _this$state.leaveCount;
const refProps = isStateless(TargetComponent) ? {
innerRef: this.setInnerRef
} : {
ref: this.setRef
};
return (// $FlowFixMe
_react.default.createElement(TargetComponent, _extends({}, otherProps, {
inViewport: inViewport,

@@ -171,10 +177,10 @@ enterCount: enterCount,

);
};
}
return InViewport;
}(Component);
}
return hoistNonReactStatic(InViewport, TargetComponent);
return (0, _hoistNonReactStatics.default)(InViewport, TargetComponent);
}
export default handleViewport;
var _default = handleViewport;
exports.default = _default;

@@ -1,32 +0,28 @@

'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.__esModule = true;
exports.default = void 0;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = _interopRequireWildcard(require("react"));
var _react = require('react');
var _reactDom = require("react-dom");
var _react2 = _interopRequireDefault(_react);
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
var _reactDom = require('react-dom');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _hoistNonReactStatics = require('hoist-non-react-statics');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
if (typeof window !== 'undefined') {
// Polyfills for intersection-observer
require('intersection-observer'); // eslint-disable-line
}

@@ -38,14 +34,22 @@

function handleViewport(TargetComponent) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { disconnectOnLeave: false };
function handleViewport(TargetComponent, options, config) {
if (options === void 0) {
options = {};
}
var InViewport = function (_Component) {
_inherits(InViewport, _Component);
if (config === void 0) {
config = {
disconnectOnLeave: false
};
}
var InViewport =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(InViewport, _Component);
function InViewport(props) {
_classCallCheck(this, InViewport);
var _this;
var _this = _possibleConstructorReturn(this, (InViewport.__proto__ || Object.getPrototypeOf(InViewport)).call(this, props));
_this = _Component.call(this, props) || this;
_this.observer = null;

@@ -59,135 +63,126 @@ _this.node = null;

_this.intersected = false;
_this.handleIntersection = _this.handleIntersection.bind(_this);
_this.initIntersectionObserver = _this.initIntersectionObserver.bind(_this);
_this.setInnerRef = _this.setInnerRef.bind(_this);
_this.setRef = _this.setRef.bind(_this);
_this.handleIntersection = _this.handleIntersection.bind(_assertThisInitialized(_this));
_this.initIntersectionObserver = _this.initIntersectionObserver.bind(_assertThisInitialized(_this));
_this.setInnerRef = _this.setInnerRef.bind(_assertThisInitialized(_this));
_this.setRef = _this.setRef.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(InViewport, [{
key: 'componentDidMount',
value: function componentDidMount() {
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
this.initIntersectionObserver();
this.startObserver(this.node, this.observer);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
// reset observer on update, to fix race condition that when observer init,
// the element is not in viewport, such as in animation
if (!this.intersected && !prevState.inViewport) {
if (this.observer && this.node) {
this.observer.unobserve(this.node); // $FlowFixMe
this.observer.observe(this.node);
}
var _proto = InViewport.prototype;
_proto.componentDidMount = function componentDidMount() {
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
this.initIntersectionObserver();
this.startObserver(this.node, this.observer);
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// reset observer on update, to fix race condition that when observer init,
// the element is not in viewport, such as in animation
if (!this.intersected && !prevState.inViewport) {
if (this.observer && this.node) {
this.observer.unobserve(this.node); // $FlowFixMe
this.observer.observe(this.node);
}
}
}, {
key: 'initIntersectionObserver',
value: function initIntersectionObserver() {
if (!this.observer) {
// $FlowFixMe
this.observer = new IntersectionObserver(this.handleIntersection, options);
}
};
_proto.initIntersectionObserver = function initIntersectionObserver() {
if (!this.observer) {
// $FlowFixMe
this.observer = new IntersectionObserver(this.handleIntersection, options);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.stopObserver(this.node, this.observer);
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.stopObserver(this.node, this.observer);
};
_proto.startObserver = function startObserver(node, observer) {
if (node && observer) {
observer.observe(node);
}
}, {
key: 'startObserver',
value: function startObserver(node, observer) {
if (node && observer) {
observer.observe(node);
}
};
_proto.stopObserver = function stopObserver(node, observer) {
if (node && observer) {
observer.unobserve(node);
observer.disconnect();
this.observer = null;
}
}, {
key: 'stopObserver',
value: function stopObserver(node, observer) {
if (node && observer) {
observer.unobserve(node);
observer.disconnect();
this.observer = null;
}
}
}, {
key: 'handleIntersection',
value: function handleIntersection(entries) {
var _props = this.props,
onEnterViewport = _props.onEnterViewport,
onLeaveViewport = _props.onLeaveViewport;
};
var entry = entries[0] || {};
var isIntersecting = entry.isIntersecting,
intersectionRatio = entry.intersectionRatio;
_proto.handleIntersection = function handleIntersection(entries) {
var _this$props = this.props,
onEnterViewport = _this$props.onEnterViewport,
onLeaveViewport = _this$props.onLeaveViewport;
var entry = entries[0] || {};
var isIntersecting = entry.isIntersecting,
intersectionRatio = entry.intersectionRatio;
var inViewport = typeof isIntersecting !== 'undefined' ? isIntersecting : intersectionRatio > 0; // enter
var inViewport = typeof isIntersecting !== 'undefined' ? isIntersecting : intersectionRatio > 0;
if (!this.intersected && inViewport) {
this.intersected = true;
onEnterViewport && onEnterViewport();
this.setState({
inViewport: inViewport,
enterCount: this.state.enterCount + 1
});
return;
} // leave
// enter
if (!this.intersected && inViewport) {
this.intersected = true;
onEnterViewport && onEnterViewport();
this.setState({
inViewport: inViewport,
enterCount: this.state.enterCount + 1
});
return;
if (this.intersected && !inViewport) {
this.intersected = false;
onLeaveViewport && onLeaveViewport();
if (config.disconnectOnLeave) {
// disconnect obsever on leave
this.observer && this.observer.disconnect();
}
// leave
if (this.intersected && !inViewport) {
this.intersected = false;
onLeaveViewport && onLeaveViewport();
if (config.disconnectOnLeave) {
// disconnect obsever on leave
this.observer && this.observer.disconnect();
}
this.setState({
inViewport: inViewport,
leaveCount: this.state.leaveCount + 1
});
}
this.setState({
inViewport: inViewport,
leaveCount: this.state.leaveCount + 1
});
}
}, {
key: 'setRef',
value: function setRef(node) {
// $FlowFixMe
this.node = (0, _reactDom.findDOMNode)(node);
};
_proto.setRef = function setRef(node) {
// $FlowFixMe
this.node = (0, _reactDom.findDOMNode)(node);
};
_proto.setInnerRef = function setInnerRef(node) {
if (node && !this.node) {
// handle stateless
this.node = node;
}
}, {
key: 'setInnerRef',
value: function setInnerRef(node) {
if (node && !this.node) {
// handle stateless
this.node = node;
}
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
onEnterViewport = _props2.onEnterViewport,
onLeaveViewport = _props2.onLeaveViewport,
otherProps = _objectWithoutProperties(_props2, ['onEnterViewport', 'onLeaveViewport']);
// pass ref to class and innerRef for stateless component
};
_proto.render = function render() {
var _this$props2 = this.props,
onEnterViewport = _this$props2.onEnterViewport,
onLeaveViewport = _this$props2.onLeaveViewport,
otherProps = _objectWithoutPropertiesLoose(_this$props2, ["onEnterViewport", "onLeaveViewport"]); // pass ref to class and innerRef for stateless component
var _state = this.state,
inViewport = _state.inViewport,
enterCount = _state.enterCount,
leaveCount = _state.leaveCount;
var refProps = isStateless(TargetComponent) ? { innerRef: this.setInnerRef } : { ref: this.setRef };
return (
// $FlowFixMe
_react2.default.createElement(TargetComponent, Object.assign({}, otherProps, {
inViewport: inViewport,
enterCount: enterCount,
leaveCount: leaveCount
}, refProps))
);
}
}]);
var _this$state = this.state,
inViewport = _this$state.inViewport,
enterCount = _this$state.enterCount,
leaveCount = _this$state.leaveCount;
var refProps = isStateless(TargetComponent) ? {
innerRef: this.setInnerRef
} : {
ref: this.setRef
};
return (// $FlowFixMe
_react.default.createElement(TargetComponent, _extends({}, otherProps, {
inViewport: inViewport,
enterCount: enterCount,
leaveCount: leaveCount
}, refProps))
);
};

@@ -197,6 +192,6 @@ return InViewport;

return (0, _hoistNonReactStatics2.default)(InViewport, TargetComponent);
return (0, _hoistNonReactStatics.default)(InViewport, TargetComponent);
}
exports.default = handleViewport;
module.exports = exports['default'];
var _default = handleViewport;
exports.default = _default;
{
"name": "react-in-viewport",
"version": "0.0.36",
"version": "0.0.37",
"description": "Track React component in viewport using Intersection Observer API",

@@ -33,18 +33,15 @@ "author": "Roderick Hsiao <roderickhsiao@gmail.com>",

"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-transform-flow-strip-types": "^7.2.3",
"@babel/plugin-transform-spread": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^4.1.4",
"@storybook/react": "^4.0.0",
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-eslint": "^8.0.0",
"babel-loader": "^7.0.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-preset-react-app": "^7.0.1",
"babel-runtime": "^6.11.6",

@@ -60,7 +57,7 @@ "bundlesize": "^0.17.0",

"eslint-plugin-react": "^7.0.0",
"flow-bin": "^0.89.0",
"git-url-parse": "^6.0.1",
"jest": "^23.0.0",
"jest-cli": "^23.6.0",
"jest-junit": "^5.2.0",
"flow-bin": "^0.93.0",
"git-url-parse": "^11.1.2",
"jest": "^24.1.0",
"jest-cli": "^24.1.0",
"jest-junit": "^6.3.0",
"react": "^16.0.0",

@@ -73,3 +70,4 @@ "react-aspect-ratio": "^1.0.3",

"peerDependencies": {
"react": "^0.14.7 || ^15.0.0 || ^16.0.0"
"react": "^0.14.7 || ^15.0.0 || ^16.0.0",
"react-dom": "^0.14.7 || ^15.0.0 || ^16.0.0"
},

@@ -76,0 +74,0 @@ "dependencies": {

@@ -10,2 +10,3 @@ <p align="center">

<hr>
Wrapper component to detect if the component is in viewport using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

@@ -19,4 +20,6 @@

Very common use case is to load image when component is in viewport ([lazy load](https://medium.com/@roderickhsiao/performance-101-i-know-how-to-load-images-a262d556250f)).
[![Greenkeeper badge](https://badges.greenkeeper.io/roderickhsiao/react-in-viewport.svg)](https://greenkeeper.io/)
A common use case is to load image when component is in viewport ([lazy load](https://medium.com/@roderickhsiao/performance-101-i-know-how-to-load-images-a262d556250f)).
Traditionally we will need to keep monitoring scroll position and calculating viewport size which could be a big scroll performance bottleneck.

@@ -40,12 +43,39 @@

1. Component
1. Options: second param is the option you want to pass to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
1. Config object:
`handleViewport(Component, Options, Config)`
- `disconnectOnLeave { Boolean }` disconnect intersection observer after leave
| Params | Type | Description |
|-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------|
| Component | React Element | Callback function for component enters viewport |
| Options | Object | Option you want to pass to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | |
| Config | Object | Configs for HOC, see below |
### Supported config
| Params | Type | Default | Description |
|-------------------|---------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------|
| disconnectOnLeave | boolean | fasle | disconnect intersection observer after leave |
### Props to the HOC component
| Props | Type | Default | Description |
|-----------------|----------|---------|-------------------------------------------------|
| onEnterViewport | function | | Callback function for component enters viewport |
| onLeaveViewport | function | | Callback function for component leaves viewport |
The HOC preserve `onEnterViewport` and `onLeaveViewport` props as a callback
### Props pass down by HOC to your component
| Props | Type | Default | Description |
|------------|-----------|---------|-----------------------------------------------------------------------------------|
| inViewport | boolean | false | Is your component in viewport |
| innerRef | React ref | | If you are using functional component, assign this props as ref on your component |
| enterCount | number | | Amount of time your component enters viewport |
| leaveCount | number | | Amount of time your component leaves viewport |
_NOTE_: Stateless: Need to add `ref={this.props.innerRef}` on your component
#### Example of functional component
```javascript

@@ -78,3 +108,3 @@ import handleViewport from 'react-in-viewport';

---
#### Example for enter/leave counts

@@ -81,0 +111,0 @@ - If you need to know how many times the component has entered the viewport use the prop `enterCount`.

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc