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

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "react-lazy-load-image-component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": " React Component to lazy load images using a HOC to track window scroll position. ",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -15,3 +15,3 @@ React Lazy Load Image Component
 * Accepts all standard `<img>` attributes.
-* No dependencies other than `react`.
+* No dependencies other than `react` and `react-dom`.
 
@@ -18,0 +18,0 @@

src/components/LazyLoadImage.jsx

@@ -9,5 +9,12 @@ import React from 'react';
 
+    const { afterLoad, beforeLoad, visibleByDefault } = this.props;
+
     this.state = {
-      visible: false
+      visible: visibleByDefault
     };
+
+    if (visibleByDefault) {
+      beforeLoad();
+      afterLoad();
+    }
   }
@@ -31,3 +38,4 @@
       threshold: true,
-      scrollPosition: true
+      scrollPosition: true,
+      visibleByDefault: true
     };
@@ -130,3 +138,3 @@
     const { afterLoad, beforeLoad, placeholder, scrollPosition, threshold,
-      ...props } = this.props;
+      visibleByDefault, ...props } = this.props;
 
@@ -150,2 +158,3 @@ return this.state.visible ?
   threshold: PropTypes.number,
+  visibleByDefault: PropTypes.bool,
   width: PropTypes.number
@@ -155,4 +164,4 @@ };
 LazyLoadImage.defaultProps = {
-  afterLoad: () => null,
-  beforeLoad: () => null,
+  afterLoad: () => ({}),
+  beforeLoad: () => ({}),
   className: '',
@@ -162,2 +171,3 @@ height: 0,
   threshold: 100,
+  visibleByDefault: false,
   width: 0
@@ -164,0 +174,0 @@ };

src/components/LazyLoadImage.spec.js

@@ -21,3 +21,4 @@ import React from 'react';
       scrollPosition = {x: 0, y: 0},
-      style = {}
+      style = {},
+      visibleByDefault = false
     } = {}) {
@@ -31,3 +32,4 @@ return mount(
         src=""
-        style={style} />
+        style={style}
+        visibleByDefault={visibleByDefault} />
     );
@@ -121,2 +123,12 @@ }
 
+  it('renders the image when it\'s not in the viewport but visibleByDefault is true', function() {
+    const lazyLoadImage = renderLazyLoadImage({
+      style: {marginTop: 100000},
+      visibleByDefault: true
+    });
+
+    expectImages(lazyLoadImage, 1);
+    expectPlaceholders(lazyLoadImage, 0);
+  });
+
   it('doesn\'t trigger beforeLoad when the image is not the viewport', function() {
@@ -154,2 +166,14 @@ const beforeLoad = jest.fn();
 
+  it('triggers beforeLoad when visibleByDefault is true', function() {
+    const beforeLoad = jest.fn();
+    const offset = 100000;
+    const lazyLoadImage = renderLazyLoadImage({
+      beforeLoad,
+      style: {marginTop: offset},
+      visibleByDefault: true
+    });
+
+    expect(beforeLoad).toHaveBeenCalledTimes(1);
+  });
+
   it('doesn\'t trigger afterLoad when the image is not the viewport', function() {
@@ -186,2 +210,14 @@ const afterLoad = jest.fn();
   });
+
+  it('triggers afterLoad when visibleByDefault is true', function() {
+    const afterLoad = jest.fn();
+    const offset = 100000;
+    const lazyLoadImage = renderLazyLoadImage({
+      afterLoad,
+      style: {marginTop: offset},
+      visibleByDefault: true
+    });
+
+    expect(afterLoad).toHaveBeenCalledTimes(1);
+  });
 });

webpack.config.js

@@ -1,2 +0,4 @@
-var path = require('path');
+const webpack = require('webpack');
+const path = require('path');
+
 module.exports = {
@@ -31,4 +33,8 @@ entry: './src/index.js',
   externals: {
-    'react': 'commonjs react'
-  }
+    'react': 'commonjs react',
+    'react-dom': 'commonjs react-dom',
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin()
+  ]
 };

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1663185

decreased by-29.32%

Lines of code

451

decreased by-97.26%

Number of low quality alerts

1

increased byInfinity%

No dependency changes