react-lazy-load-image-component - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

build/index.js

@@ -515,4 +515,4 @@ module.exports =
 
-var LazyLoadImage = function (_React$PureComponent) {
-  _inherits(LazyLoadImage, _React$PureComponent);
+var LazyLoadImage = function (_React$Component) {
+  _inherits(LazyLoadImage, _React$Component);
 
@@ -588,9 +588,6 @@ function LazyLoadImage(props) {
     value: function componentDidUpdate() {
-      if (this.refs.placeholder) {
-        var boundingBox = {
-          bottom: this.refs.placeholder.offsetTop + this.refs.placeholder.offsetHeight,
-          top: this.refs.placeholder.offsetTop
-        };
+      if (this.placeholder) {
+        var boundingBox = this.getPlaceholderBoundingBox(this.props.scrollPosition);
 
-        if (this.previousBoundingBox.bottom !== boundingBox.bottom || this.previousBoundingBox.top !== boundingBox.top) {
+        if (this.previousBoundingBox.bottom !== boundingBox.bottom || this.previousBoundingBox.left !== boundingBox.left || this.previousBoundingBox.right !== boundingBox.right || this.previousBoundingBox.top !== boundingBox.top) {
           this.updateVisibility();
@@ -601,2 +598,14 @@ }
   }, {
+    key: 'getPlaceholderBoundingBox',
+    value: function getPlaceholderBoundingBox(scrollPosition) {
+      var boundingRect = this.placeholder.getBoundingClientRect();
+
+      return {
+        bottom: boundingRect.top + scrollPosition.y + boundingRect.height,
+        left: boundingRect.left + scrollPosition.x,
+        right: boundingRect.right + scrollPosition.x + boundingRect.width,
+        top: boundingRect.top + scrollPosition.y
+      };
+    }
+  }, {
     key: 'updateVisibility',
@@ -618,3 +627,3 @@ value: function updateVisibility() {
         visible: true
-      }, this.props.afterLoad);
+      }, this.props.afterLoad());
     }
@@ -624,3 +633,3 @@ }, {
     value: function isImageInViewport(scrollPosition) {
-      if (!this.refs.placeholder) {
+      if (!this.placeholder) {
         return false;
@@ -631,8 +640,3 @@ }
 
-      var boundingBox = {
-        bottom: this.refs.placeholder.offsetTop + this.refs.placeholder.offsetHeight,
-        left: this.refs.placeholder.offsetLeft,
-        right: this.refs.placeholder.offsetLeft + this.refs.placeholder.offsetWidth,
-        top: this.refs.placeholder.offsetTop
-      };
+      var boundingBox = this.getPlaceholderBoundingBox(scrollPosition);
       var viewport = {
@@ -646,3 +650,3 @@ bottom: scrollPosition.y + window.innerHeight,
       this.previousBoundingBox = boundingBox;
-
+      console.log(viewport, boundingBox, Boolean(viewport.top - threshold <= boundingBox.bottom && viewport.bottom + threshold >= boundingBox.top && viewport.left - threshold <= boundingBox.right && viewport.right + threshold >= boundingBox.left));
       return Boolean(viewport.top - threshold <= boundingBox.bottom && viewport.bottom + threshold >= boundingBox.top && viewport.left - threshold <= boundingBox.right && viewport.right + threshold >= boundingBox.left);
@@ -653,2 +657,4 @@ }
     value: function getPlaceholder() {
+      var _this2 = this;
+
       var _props = this.props,
@@ -662,7 +668,11 @@ className = _props.className,
       if (placeholder) {
-        return _react2.default.cloneElement(placeholder, { ref: 'placeholder' });
+        return _react2.default.cloneElement(placeholder, { ref: function ref(el) {
+            return _this2.placeholder = el;
+          } });
       }
 
       return _react2.default.createElement('span', { className: 'lazy-load-image-placeholder ' + className,
-        ref: 'placeholder',
+        ref: function ref(el) {
+          return _this2.placeholder = el;
+        },
         style: { height: height, width: width } });
@@ -673,2 +683,4 @@ }
     value: function render() {
+      var _this3 = this;
+
       var _props2 = this.props,
@@ -687,3 +699,5 @@ afterLoad = _props2.afterLoad,
       return _react2.default.createElement('img', _extends({}, props, {
-        ref: 'image' }));
+        ref: function ref(img) {
+          return _this3.image = img;
+        } }));
     }
@@ -693,3 +707,3 @@ }]);
   return LazyLoadImage;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
@@ -696,0 +710,0 @@ LazyLoadImage.propTypes = {

package.json

 {
   "name": "react-lazy-load-image-component",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": " React Component to lazy load images using a HOC to track window scroll position. ",
@@ -35,3 +35,3 @@ "main": "build/index.js",
     "type": "git",
-    "url": "git+https://github.com/Aljullu/react-lazy-load-image.git"
+    "url": "git+https://github.com/Aljullu/react-lazy-load-image-component.git"
   },
@@ -48,5 +48,5 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/Aljullu/react-lazy-load-image/issues"
+    "url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
   },
-  "homepage": "https://github.com/Aljullu/react-lazy-load-image#readme"
+  "homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme"
 }

README.md

@@ -1,3 +0,3 @@
-React Lazy Load Image
-=====================
+React Lazy Load Image Component
+===============================
 
@@ -43,3 +43,4 @@ React Component to lazy load images using a HOC to track window scroll position.
 import React from 'react';
-import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';
+import { LazyLoadImage, trackWindowScroll }
+  from 'react-lazy-load-image-component';
 
@@ -51,4 +52,5 @@ const Gallery = ({ images, scrollPosition }) => (
         key={image.key}
+        alt={image.alt}
         height={image.height}
-        scrollPosition={scrollPosition} // pass the scrollPosition to the image
+        scrollPosition={scrollPosition} // pass the scrollPosition
         src={image.src} // use normal <img> attributes as props
@@ -59,4 +61,4 @@ width={image.width} />
 );
-// Wrap Gallery with trackWindowScroll HOC so it receives a scrollPosition prop
-// to pass down to the images
+// Wrap Gallery with trackWindowScroll HOC so it receives
+// a scrollPosition prop to pass down to the images
 export default trackWindowScroll(Gallery);
@@ -77,4 +79,6 @@ ```
 
-## Screenshots
+## Screenshot
 
-<a href="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image/master/screenshots/example.gif"><img src="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image/master/screenshots/example.gif" alt="" /></a>
+<a href="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image-component/master/screenshots/example.gif"><img src="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image-component/master/screenshots/example.gif" alt="" /></a>
+
+Get the [full code of this example](https://github.com/Aljullu/weather-app).

src/components/LazyLoadImage.jsx

 import React from 'react';
 import { PropTypes } from 'prop-types';
 
-class LazyLoadImage extends React.PureComponent {
+class LazyLoadImage extends React.Component {
   constructor(props) {
@@ -62,11 +62,20 @@ super(props);
 
+  getPlaceholderBoundingBox() {
+    return {
+      bottom: this.placeholder.offsetTop +
+        this.placeholder.offsetHeight,
+      left: this.placeholder.offsetLeft,
+      right: this.placeholder.offsetLeft +
+        this.placeholder.offsetWidth,
+      top: this.placeholder.offsetTop
+    };
+  }
+
   componentDidUpdate() {
-    if (this.refs.placeholder) {
-      const boundingBox = {
-        bottom: this.refs.placeholder.offsetTop +
-          this.refs.placeholder.offsetHeight,
-        top: this.refs.placeholder.offsetTop
-      };
+    if (this.placeholder) {
+      const boundingBox = this.getPlaceholderBoundingBox();
 
       if (this.previousBoundingBox.bottom !== boundingBox.bottom ||
+          this.previousBoundingBox.left !== boundingBox.left ||
+          this.previousBoundingBox.right !== boundingBox.right ||
           this.previousBoundingBox.top !== boundingBox.top) {
@@ -95,3 +104,3 @@ this.updateVisibility();
   isImageInViewport(scrollPosition) {
-    if (!this.refs.placeholder) {
+    if (!this.placeholder) {
       return false;
@@ -101,10 +110,3 @@ }
     const { threshold } = this.props;
-    const boundingBox = {
-      bottom: this.refs.placeholder.offsetTop +
-        this.refs.placeholder.offsetHeight,
-      left: this.refs.placeholder.offsetLeft,
-      right: this.refs.placeholder.offsetLeft +
-        this.refs.placeholder.offsetWidth,
-      top: this.refs.placeholder.offsetTop
-    };
+    const boundingBox = this.getPlaceholderBoundingBox();
     const viewport = {
@@ -129,3 +131,4 @@ bottom: scrollPosition.y + window.innerHeight,
     if (placeholder) {
-      return React.cloneElement(placeholder, { ref: 'placeholder' });
+      return React.cloneElement(placeholder,
+        { ref: el => this.placeholder = el });
     }
@@ -135,3 +138,3 @@
       <span className={'lazy-load-image-placeholder ' + className}
-        ref="placeholder"
+        ref={el => this.placeholder = el}
         style={{ height, width }}>
@@ -153,3 +156,3 @@ </span>
         {...props}
-        ref="image" />
+        ref={img => this.image = img} />
     );
@@ -156,0 +159,0 @@ }

src/components/LazyLoadImage.spec.js

@@ -73,3 +73,3 @@ import React from 'react';
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition:  {x: 0, y: 0}});
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
 
@@ -80,2 +80,13 @@ expectImages(lazyLoadImage, 1);
 
+  it('renders the image when it appears in the viewport horizontally', function() {
+    const lazyLoadImage = renderLazyLoadImage({
+      scrollPosition: {x: -1000, y: 0}
+    });
+
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
+
+    expectImages(lazyLoadImage, 1);
+    expectPlaceholders(lazyLoadImage, 0);
+  });
+
   it('doesn\'t trigger beforeLoad when the image is not the viewport', function() {
@@ -107,3 +118,3 @@ const beforeLoad = jest.fn();
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition:  {x: 0, y: 0}});
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
 
@@ -136,3 +147,3 @@ expect(beforeLoad).toHaveBeenCalledTimes(1);
       afterLoad,
-      scrollPosition:  {x: 0, y: -1000}
+      scrollPosition: {x: 0, y: -1000}
     });
@@ -139,0 +150,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1696443

increased by0.08%

Lines of code

1736

increased by1.28%

Number of lines in readme file

81

increased by5.19%

No dependency changes