react-in-viewport - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/index.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _assign = require('babel-runtime/core-js/object/assign');
+var _extends2 = require('babel-runtime/helpers/extends');
 
-var _assign2 = _interopRequireDefault(_assign);
+var _extends3 = _interopRequireDefault(_extends2);
 
@@ -55,2 +55,6 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
+var isStateless = function isStateless(Component) {
+  return !Component.prototype.render;
+};
+
 function handleViewport(Component, options) {
@@ -75,2 +79,4 @@ var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { disconnectOnLeave: false };
       _this.initIntersectionObserver = _this.initIntersectionObserver.bind(_this);
+      _this.setRef = _this.setRef.bind(_this);
+      _this.setInnerRef = _this.setInnerRef.bind(_this);
       return _this;
@@ -162,6 +168,19 @@ }
     }, {
+      key: 'setRef',
+      value: function setRef(node) {
+        this.node = _reactDom2.default.findDOMNode(node);
+      }
+    }, {
+      key: 'setInnerRef',
+      value: function setInnerRef(node) {
+        if (node && !this.node) {
+          // handle stateless
+          this.node = _reactDom2.default.findDOMNode(node);
+          this.initIntersectionObserver();
+          this.startObserver(this.node, this.observer);
+        }
+      }
+    }, {
       key: 'render',
       value: function render() {
-        var _this2 = this;
-
         var _props2 = this.props,
@@ -171,17 +190,8 @@ onEnterViewport = _props2.onEnterViewport,
             others = (0, _objectWithoutProperties3.default)(_props2, ['onEnterViewport', 'onLeaveViewport']);
+        // pass ref to class and innerRef for stateless component
 
-        return _react2.default.createElement(Component, (0, _assign2.default)({}, others, {
-          inViewport: this.state.inViewport,
-          ref: function ref(node) {
-            _this2.node = _reactDom2.default.findDOMNode(node);
-          },
-          innerRef: function innerRef(node) {
-            if (node && !_this2.node) {
-              // handle stateless
-              _this2.node = _reactDom2.default.findDOMNode(node);
-              _this2.initIntersectionObserver();
-              _this2.startObserver(_reactDom2.default.findDOMNode(node), _this2.observer);
-            }
-          }
-        }));
+        var refProps = isStateless(Component) ? { innerRef: this.setInnerRef } : { ref: this.setRef };
+        return _react2.default.createElement(Component, (0, _extends3.default)({}, others, {
+          inViewport: this.state.inViewport
+        }, refProps));
       }
@@ -188,0 +198,0 @@ }]);

package.json

 {
   "name": "react-in-viewport",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Track React component in viewport",
@@ -42,3 +42,3 @@ "author": "Roderick Hsiao <[e-mail]>",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^3.0.0",
+    "babel-preset-react-app": "^0.2.1",
     "babel-runtime": "^6.11.6",
@@ -59,3 +59,4 @@ "chai": "^3.5.0",
     "react-dom": "^16.0.0",
-    "sinon": "^2.0.0"
+    "sinon": "^2.0.0",
+    "storybook-addon-jsx": "^5.1.0"
   },
@@ -67,4 +68,3 @@ "peerDependencies": {
     "hoist-non-react-statics": "^2.0.0",
-    "intersection-observer": "^0.5.0",
-    "react-router": "^4.2.0"
+    "intersection-observer": "^0.5.0"
   },
@@ -71,0 +71,0 @@ "main": "dist/index.js",

README.md

 # React In Viewport Component
+
 [![npm version](https://badge.fury.io/js/react-aspect-ratio.svg)](http://badge.fury.io/js/react-in-viewport)
@@ -18,7 +19,8 @@
 1. Config object:
- - `disconnectOnLeave { Boolean }` disconnect intersection observer after leave
 
+* `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
+_NOTE_: Stateless: Need to add `ref={this.props.innerRef}` on your component
 
@@ -51,1 +53,5 @@ ```javascript
 ```
+
+## Who is using this component
+
+- [Tinder](https://tinder.com)

src/index.js

@@ -10,3 +10,9 @@ if (typeof window !== 'undefined') {
 
-function handleViewport(Component, options, config = { disconnectOnLeave: false }) {
+const isStateless = Component => !Component.prototype.render;
+
+function handleViewport(
+  Component,
+  options,
+  config = { disconnectOnLeave: false }
+) {
   class InViewport extends PureComponent {
@@ -23,2 +29,4 @@ constructor(props) {
       this.initIntersectionObserver = this.initIntersectionObserver.bind(this);
+      this.setRef = this.setRef.bind(this);
+      this.setInnerRef = this.setInnerRef.bind(this);
     }
@@ -100,4 +108,22 @@
 
+    setRef(node) {
+      this.node = ReactDOM.findDOMNode(node);
+    }
+
+    setInnerRef(node) {
+      if (node && !this.node) {
+        // handle stateless
+        this.node = ReactDOM.findDOMNode(node);
+        this.initIntersectionObserver();
+        this.startObserver(this.node, this.observer);
+      }
+    }
+
     render() {
       const { onEnterViewport, onLeaveViewport, ...others } = this.props;
+      // pass ref to class and innerRef for stateless component
+
+      const refProps = isStateless(Component)
+        ? { innerRef: this.setInnerRef }
+        : { ref: this.setRef };
       return (
@@ -107,13 +133,3 @@ <Component
           inViewport={this.state.inViewport}
-          ref={node => {
-            this.node = ReactDOM.findDOMNode(node);
-          }}
-          innerRef={node => {
-            if (node && !this.node) {
-              // handle stateless
-              this.node = ReactDOM.findDOMNode(node);
-              this.initIntersectionObserver();
-              this.startObserver(ReactDOM.findDOMNode(node), this.observer);
-            }
-          }}
+          {...refProps}
         />
@@ -120,0 +136,0 @@ );

New alerts

Major refactor

Supply chain risk

Package 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

Fixed alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

3386436

increased by0.76%

Dependency count

3

decreased by-25%

Lines of code

23783

increased by3.9%

Number of lines in readme file

56

increased by12%

Worsened metrics

Dev dependency count

29

increased by3.57%

Number of package files

12

decreased by-7.69%

Dependency changes

• - Removedreact-router@^4.2.0

• - Removed@babel/runtime@7.26.7(transitive)

• - Removedhistory@4.10.1(transitive)

• - Removedinvariant@2.2.4(transitive)

• - Removedisarray@0.0.1(transitive)

• - Removedpath-to-regexp@1.9.0(transitive)

• - Removedreact-router@4.3.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedresolve-pathname@3.0.0(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• - Removedvalue-equal@1.0.1(transitive)

• - Removedwarning@4.0.3(transitive)