react-lazyload - npm Package Compare versions

Comparing version 2.6.2 to 2.6.3

lib/index.js

@@ -14,6 +14,2 @@ 'use strict';
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _propTypes = require('prop-types');
@@ -74,3 +70,3 @@
 var checkOverflowVisible = function checkOverflowVisible(component, parent) {
-  var node = _reactDom2.default.findDOMNode(component);
+  var node = component.ref;
 
@@ -136,6 +132,6 @@ var parentTop = void 0;
  * @param  {node} component React component
- * @return {bool}
+ * @return {boolean}
  */
 var checkNormalVisible = function checkNormalVisible(component) {
-  var node = _reactDom2.default.findDOMNode(component);
+  var node = component.ref;
 
@@ -172,3 +168,7 @@ // If this element is hidden by css rules somehow, it's definitely invisible
 var checkVisible = function checkVisible(component) {
-  var node = _reactDom2.default.findDOMNode(component);
+  if (!component) {
+    return;
+  }
+
+  var node = component.ref;
   if (!(node instanceof HTMLElement)) {
@@ -183,3 +183,3 @@ return;
     // Avoid extra render if previously is visible
-    if (!component.visible) {
+    if (!component.visible && !component.preventLoading) {
       if (component.props.once) {
@@ -237,2 +237,4 @@ pending.push(component);
     _this.visible = false;
+    _this.setRef = _this.setRef.bind(_this);
+    _this.preventLoading = props.preventLoading;
     return _this;
@@ -275,3 +277,3 @@ }
       if (this.props.overflow) {
-        var parent = (0, _scrollParent2.default)(_reactDom2.default.findDOMNode(this));
+        var parent = (0, _scrollParent2.default)(this.ref);
         if (parent && typeof parent.getAttribute === 'function') {
@@ -304,3 +306,10 @@ var listenerCount = 1 + +parent.getAttribute(LISTEN_FLAG);
     key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate() {
+    value: function shouldComponentUpdate(_ref) {
+      var preventLoading = _ref.preventLoading;
+
+      if (preventLoading !== this.props.preventLoading) {
+        this.preventLoading = preventLoading;
+        checkVisible(this);
+      }
+
       return this.visible;
@@ -312,3 +321,3 @@ }
       if (this.props.overflow) {
-        var parent = (0, _scrollParent2.default)(_reactDom2.default.findDOMNode(this));
+        var parent = (0, _scrollParent2.default)(this.ref);
         if (parent && typeof parent.getAttribute === 'function') {
@@ -336,5 +345,12 @@ var listenerCount = +parent.getAttribute(LISTEN_FLAG) - 1;
   }, {
+    key: 'setRef',
+    value: function setRef(element) {
+      if (element) {
+        this.ref = element;
+      }
+    }
+  }, {
     key: 'render',
     value: function render() {
-      return this.visible ? this.props.children : this.props.placeholder ? this.props.placeholder : _react2.default.createElement('div', { style: { height: this.props.height }, className: 'lazyload-placeholder' });
+      return this.visible ? this.props.children : this.props.placeholder ? this.props.placeholder : _react2.default.createElement('div', { style: { height: this.props.height }, className: 'lazyload-placeholder', ref: this.setRef });
     }
@@ -358,3 +374,4 @@ }]);
   scrollContainer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-  unmountIfInvisible: _propTypes2.default.bool
+  unmountIfInvisible: _propTypes2.default.bool,
+  preventLoading: _propTypes2.default.bool
 };
@@ -368,3 +385,4 @@
   scroll: true,
-  unmountIfInvisible: false
+  unmountIfInvisible: false,
+  preventLoading: false
 };
@@ -371,0 +389,0 @@

package.json

 {
   "name": "react-lazyload",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "Lazyload your components, images or anything where performance matters.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -187,2 +187,12 @@ # Note
 
+### preventLoading
+
+Type: Bool Default: false
+
+If set to true your component will not be mounted even if it is visible in the viewport. Use it when you want to have a manual control over when your component is lazyloaded. 
+
+One use case for that would be in galleries, for instance, you may want the visible item to be loaded when in viewport but the not yet visible items to only be loaded when the user interacts with the gallery.
+
+[demo](https://twobin.github.io/react-lazyload/examples/#/preventLoading)
+
 ## Utility
@@ -189,0 +199,0 @@

No alert changes

Improved metrics

Lines of code

461

3.83%

Number of lines in readme file

237

4.41%

Worsened metrics

Total package byte prevSize

31684

-84.03%

Number of package files

10

-9.09%

No dependency changes