react-in-viewport
Advanced tools
Comparing version 0.0.36 to 0.0.37
@@ -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`. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
96716
33
19
2024
154
4
1