react-in-viewport - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/index.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -52,2 +56,4 @@
 function handleViewport(Component, options) {
+  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { disconnectOnLeave: false };
+
   var InViewport = function (_PureComponent) {
@@ -66,2 +72,3 @@ (0, _inherits3.default)(InViewport, _PureComponent);
       };
+      _this.intersected = false;
       _this.handleIntersection = _this.handleIntersection.bind(_this);
@@ -80,2 +87,12 @@ _this.initIntersectionObserver = _this.initIntersectionObserver.bind(_this);
     }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        // reset observer on update, to fix race condition that when observer init, the element is not in viewport
+        // such as in animation
+        if (!config.disconnectOnLeave && !this.intersected) {
+          this.stopObserver(this.node, this.observer);
+          this.startObserver(this.node, this.observer);
+        }
+      }
+    }, {
       key: 'initIntersectionObserver',
@@ -111,8 +128,32 @@ value: function initIntersectionObserver() {
       value: function handleIntersection(entries) {
+        var _props = this.props,
+            onEnterViewport = _props.onEnterViewport,
+            onLeaveViewport = _props.onLeaveViewport;
+
         var entry = entries[0] || {};
         var intersectionRatio = entry.intersectionRatio;
 
+        var inViewport = intersectionRatio > 0;
 
+        // enter
+        if (!this.intersected && inViewport) {
+          this.intersected = true;
+          onEnterViewport && onEnterViewport();
+        }
+
+        // leave
+        if (this.intersected && !inViewport) {
+          onLeaveViewport && onLeaveViewport();
+          if (config.disconnectOnLeave) {
+            // disconnect obsever on leave
+            this.observer && this.observer.disconnect();
+          } else {
+            // only reset flag if config.disconnectOnLeave is true,
+            // so that onEnterViewport and onLeaveViewport will only be called once
+            this.intersected = false;
+          }
+        }
+
         this.setState({
-          inViewport: intersectionRatio <= 0 ? false : true
+          inViewport: inViewport
         });
@@ -125,3 +166,8 @@ }
 
-        return _react2.default.createElement(Component, (0, _assign2.default)({}, this.props, {
+        var _props2 = this.props,
+            onEnterViewport = _props2.onEnterViewport,
+            onLeaveViewport = _props2.onLeaveViewport,
+            others = (0, _objectWithoutProperties3.default)(_props2, ['onEnterViewport', 'onLeaveViewport']);
+
+        return _react2.default.createElement(Component, (0, _assign2.default)({}, others, {
           inViewport: this.state.inViewport,
@@ -134,2 +180,3 @@ ref: function ref(node) {
               // handle stateless
+              _this2.node = _reactDom2.default.findDOMNode(node);
               _this2.initIntersectionObserver();
@@ -136,0 +183,0 @@ _this2.startObserver(_reactDom2.default.findDOMNode(node), _this2.observer);

package.json

 {
   "name": "react-in-viewport",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Track React component in viewport",
@@ -5,0 +5,0 @@ "author": "Roderick Hsiao <[e-mail]>",

README.md

@@ -9,5 +9,15 @@ # React In Viewport Component
 
-
 ## Usages
 
+Wrap your component with handleViewport HOC, you will receive `inViewport` props indicating the component is in viewport or not.
+
+`handleViewport` HOC accepts three params
+
+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:
+ - `disconnectOnLeave { Boolean }` disconnect intersection observer after leave
+
+The HOC preserve `onEnterViewport` and `onLeaveViewport` props as a callback
+
 *NOTE*: Stateless: Need to add `ref={this.props.innerRef}` on your component
@@ -18,3 +28,3 @@
 
-const Block = (props) => {
+const Block = (props: { inViewport: boolean }) => {
   const { inViewport, innerRef } = props;
@@ -30,4 +40,5 @@ const color = inViewport ? '#217ac0' : '#ff9800';
 };
-const ViewportBlock = handleViewport(Block);
 
+const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);
+
 const Component = (props) => (
@@ -38,5 +49,5 @@ <div>
     </div>
-    <ViewportBlock />
+    <ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
   </div>
 ))
 ```

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

21874

increased by13.17%

Lines of code

363

increased by12.38%

Number of lines in readme file

50

increased by28.21%

No dependency changes