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

Comparing version 1.4.1 to 1.4.2

build/index.js

@@ -101,4 +101,4 @@ module.exports = (function(e) {
 			a = u(r(4)),
-			l = u(r(12)),
-			s = u(r(2));
+			s = u(r(12)),
+			l = u(r(2));
 		function u(e) {
@@ -197,3 +197,3 @@ return e && e.__esModule ? e : { default: e };
 							return this.isScrollTracked ||
-								(d && (0, s.default)())
+								(d && (0, l.default)())
 								? o.default.createElement(a.default, {
@@ -210,3 +210,3 @@ className: t,
 								  })
-								: o.default.createElement(l.default, {
+								: o.default.createElement(s.default, {
 										className: t,
@@ -276,4 +276,4 @@ delayMethod: r,
 			a = u(r(5)),
-			l = r(1),
-			s = u(r(2));
+			s = r(1),
+			l = u(r(2));
 		function u(e) {
@@ -306,3 +306,3 @@ return e && e.__esModule ? e : { default: e };
 						e.useIntersectionObserver &&
-						(0, s.default)();
+						(0, l.default)();
 				if (((r.LAZY_LOAD_OBSERVER = { supportsObserver: n }), n)) {
@@ -362,3 +362,3 @@ var o = e.threshold;
 					{
-						key: 'componentWillUnMount',
+						key: 'componentWillUnmount',
 						value: function() {
@@ -425,5 +425,5 @@ this.LAZY_LOAD_OBSERVER &&
 								a = t.x + window.innerWidth,
-								l = t.y;
+								s = t.y;
 							return Boolean(
-								l - r <= n.bottom &&
+								s - r <= n.bottom &&
 									o + r >= n.top &&
@@ -450,28 +450,26 @@ i - r <= n.right &&
 								a = t.placeholder,
-								l = t.style,
-								s = t.width;
-							return a && 'function' != typeof a.type
-								? i.default.cloneElement(a, {
+								s = t.style,
+								l = t.width;
+							if (a && 'function' != typeof a.type)
+								return i.default.cloneElement(a, {
+									ref: function(t) {
+										return (e.placeholder = t);
+									},
+								});
+							var u = n({ display: 'inline-block' }, s);
+							return (
+								void 0 !== l && (u.width = l),
+								void 0 !== o && (u.height = o),
+								i.default.createElement(
+									'span',
+									{
+										className: r,
 										ref: function(t) {
 											return (e.placeholder = t);
 										},
-								  })
-								: i.default.createElement(
-										'span',
-										{
-											className: r,
-											ref: function(t) {
-												return (e.placeholder = t);
-											},
-											style: n(
-												{
-													display: 'inline-block',
-													height: o,
-													width: s,
-												},
-												l
-											),
-										},
-										a
-								  );
+										style: u,
+									},
+									a
+								)
+							);
 						},
@@ -484,21 +482,25 @@ },
 		(c.propTypes = {
-			onVisible: l.PropTypes.func.isRequired,
-			className: l.PropTypes.string,
-			height: l.PropTypes.number,
-			placeholder: l.PropTypes.element,
-			threshold: l.PropTypes.number,
-			useIntersectionObserver: l.PropTypes.bool,
-			scrollPosition: l.PropTypes.shape({
-				x: l.PropTypes.number.isRequired,
-				y: l.PropTypes.number.isRequired,
+			onVisible: s.PropTypes.func.isRequired,
+			className: s.PropTypes.string,
+			height: s.PropTypes.oneOfType([
+				s.PropTypes.number,
+				s.PropTypes.string,
+			]),
+			placeholder: s.PropTypes.element,
+			threshold: s.PropTypes.number,
+			useIntersectionObserver: s.PropTypes.bool,
+			scrollPosition: s.PropTypes.shape({
+				x: s.PropTypes.number.isRequired,
+				y: s.PropTypes.number.isRequired,
 			}),
-			width: l.PropTypes.number,
+			width: s.PropTypes.oneOfType([
+				s.PropTypes.number,
+				s.PropTypes.string,
+			]),
 		}),
 			(c.defaultProps = {
 				className: '',
-				height: 0,
 				placeholder: null,
 				threshold: 100,
 				useIntersectionObserver: !0,
-				width: 0,
 			}),
@@ -540,4 +542,4 @@ (t.default = c);
 			a = p(r(5)),
-			l = r(1),
-			s = p(r(13)),
+			s = r(1),
+			l = p(r(13)),
 			u = p(r(14)),
@@ -590,3 +592,3 @@ c = p(r(2)),
 						'debounce' === e.delayMethod
-							? (t.delayedScroll = (0, s.default)(n, e.delayTime))
+							? (t.delayedScroll = (0, l.default)(n, e.delayTime))
 							: 'throttle' === e.delayMethod &&
@@ -745,5 +747,5 @@ (t.delayedScroll = (0, u.default)(
 				(t.propTypes = {
-					delayMethod: l.PropTypes.oneOf(['debounce', 'throttle']),
-					delayTime: l.PropTypes.number,
-					useIntersectionObserver: l.PropTypes.bool,
+					delayMethod: s.PropTypes.oneOf(['debounce', 'throttle']),
+					delayTime: s.PropTypes.number,
+					useIntersectionObserver: s.PropTypes.bool,
 				}),
@@ -813,6 +815,6 @@ (t.defaultProps = {
 			})(),
-			i = s(r(0)),
+			i = l(r(0)),
 			a = r(1),
-			l = s(r(3));
-		function s(e) {
+			s = l(r(3));
+		function l(e) {
 			return e && e.__esModule ? e : { default: e };
@@ -932,3 +934,3 @@ }
 								a = e.height,
-								s = e.placeholder,
+								l = e.placeholder,
 								u = e.scrollPosition,
@@ -941,3 +943,3 @@ c = e.style,
 							return i.default.createElement(
-								l.default,
+								s.default,
 								{
@@ -949,3 +951,3 @@ beforeLoad: t,
 									height: a,
-									placeholder: s,
+									placeholder: l,
 									scrollPosition: u,
@@ -970,5 +972,5 @@ style: c,
 								a = t.width,
-								l = t.wrapperClassName,
-								s = this.state.loaded,
-								u = s ? ' lazy-load-image-loaded' : '';
+								s = t.wrapperClassName,
+								l = this.state.loaded,
+								u = l ? ' lazy-load-image-loaded' : '';
 							return i.default.createElement(
@@ -978,3 +980,3 @@ 'span',
 									className:
-										l +
+										s +
 										' lazy-load-image-background ' +
@@ -985,5 +987,5 @@ r +
 										backgroundImage:
-											s || !o ? '' : 'url(' + o + ')',
+											l || !o ? '' : 'url(' + o + ')',
 										backgroundSize:
-											s || !o ? '' : '100% 100%',
+											l || !o ? '' : '100% 100%',
 										color: 'transparent',
@@ -1055,6 +1057,6 @@ display: 'inline-block',
 					if (a !== n) {
-						var l = new Error(
+						var s = new Error(
 							'Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types'
 						);
-						throw ((l.name = 'Invariant Violation'), l);
+						throw ((s.name = 'Invariant Violation'), s);
 					}
@@ -1112,9 +1114,9 @@ }
 			})(),
-			o = l(r(0)),
-			i = l(r(4)),
-			a = l(r(6));
-		function l(e) {
+			o = s(r(0)),
+			i = s(r(4)),
+			a = s(r(6));
+		function s(e) {
 			return e && e.__esModule ? e : { default: e };
 		}
-		var s = (function(e) {
+		var l = (function(e) {
 			function t(e) {
@@ -1177,3 +1179,3 @@ return (
 		})(o.default.Component);
-		t.default = (0, a.default)(s);
+		t.default = (0, a.default)(l);
 	},
@@ -1187,4 +1189,4 @@ function(e, t, r) {
 				a = /^[-+]0x[0-9a-f]+$/i,
-				l = /^0b[01]+$/i,
-				s = /^0o[0-7]+$/i,
+				s = /^0b[01]+$/i,
+				l = /^0o[0-7]+$/i,
 				u = parseInt,
@@ -1228,4 +1230,4 @@ c = 'object' == typeof t && t && t.Object === Object && t,
 				e = e.replace(i, '');
-				var r = l.test(e);
-				return r || s.test(e)
+				var r = s.test(e);
+				return r || l.test(e)
 					? u(e.slice(2), r ? 2 : 8)
@@ -1240,4 +1242,4 @@ : a.test(e)
 					a,
+					s,
 					l,
-					s,
 					u,
@@ -1252,3 +1254,3 @@ c = 0,
 						n = i;
-					return (o = i = void 0), (c = t), (l = e.apply(n, r));
+					return (o = i = void 0), (c = t), (s = e.apply(n, r));
 				}
@@ -1262,3 +1264,3 @@ function w(e) {
 					if (w(e)) return _(e);
-					s = setTimeout(
+					l = setTimeout(
 						g,
@@ -1272,3 +1274,3 @@ (function(e) {
 				function _(e) {
-					return (s = void 0), d && o ? O(e) : ((o = i = void 0), l);
+					return (l = void 0), d && o ? O(e) : ((o = i = void 0), s);
 				}
@@ -1279,13 +1281,13 @@ function P() {
 					if (((o = arguments), (i = this), (u = e), r)) {
-						if (void 0 === s)
+						if (void 0 === l)
 							return (function(e) {
 								return (
 									(c = e),
-									(s = setTimeout(g, t)),
-									f ? O(e) : l
+									(l = setTimeout(g, t)),
+									f ? O(e) : s
 								);
 							})(u);
-						if (p) return (s = setTimeout(g, t)), O(u);
+						if (p) return (l = setTimeout(g, t)), O(u);
 					}
-					return void 0 === s && (s = setTimeout(g, t)), l;
+					return void 0 === l && (l = setTimeout(g, t)), s;
 				}
@@ -1301,8 +1303,8 @@ return (
 					(P.cancel = function() {
-						void 0 !== s && clearTimeout(s),
+						void 0 !== l && clearTimeout(l),
 							(c = 0),
-							(o = u = i = s = void 0);
+							(o = u = i = l = void 0);
 					}),
 					(P.flush = function() {
-						return void 0 === s ? l : _(b());
+						return void 0 === l ? s : _(b());
 					}),
@@ -1321,4 +1323,4 @@ P
 				a = /^[-+]0x[0-9a-f]+$/i,
-				l = /^0b[01]+$/i,
-				s = /^0o[0-7]+$/i,
+				s = /^0b[01]+$/i,
+				l = /^0o[0-7]+$/i,
 				u = parseInt,
@@ -1342,4 +1344,4 @@ c = 'object' == typeof t && t && t.Object === Object && t,
 					a,
+					s,
 					l,
-					s,
 					u,
@@ -1354,3 +1356,3 @@ c = 0,
 						n = i;
-					return (o = i = void 0), (c = t), (l = e.apply(n, r));
+					return (o = i = void 0), (c = t), (s = e.apply(n, r));
 				}
@@ -1364,3 +1366,3 @@ function w(e) {
 					if (w(e)) return _(e);
-					s = setTimeout(
+					l = setTimeout(
 						g,
@@ -1374,3 +1376,3 @@ (function(e) {
 				function _(e) {
-					return (s = void 0), d && o ? v(e) : ((o = i = void 0), l);
+					return (l = void 0), d && o ? v(e) : ((o = i = void 0), s);
 				}
@@ -1381,13 +1383,13 @@ function P() {
 					if (((o = arguments), (i = this), (u = e), r)) {
-						if (void 0 === s)
+						if (void 0 === l)
 							return (function(e) {
 								return (
 									(c = e),
-									(s = setTimeout(g, t)),
-									f ? v(e) : l
+									(l = setTimeout(g, t)),
+									f ? v(e) : s
 								);
 							})(u);
-						if (p) return (s = setTimeout(g, t)), v(u);
+						if (p) return (l = setTimeout(g, t)), v(u);
 					}
-					return void 0 === s && (s = setTimeout(g, t)), l;
+					return void 0 === l && (l = setTimeout(g, t)), s;
 				}
@@ -1403,8 +1405,8 @@ return (
 					(P.cancel = function() {
-						void 0 !== s && clearTimeout(s),
+						void 0 !== l && clearTimeout(l),
 							(c = 0),
-							(o = u = i = s = void 0);
+							(o = u = i = l = void 0);
 					}),
 					(P.flush = function() {
-						return void 0 === s ? l : _(b());
+						return void 0 === l ? s : _(b());
 					}),
@@ -1438,4 +1440,4 @@ P
 				e = e.replace(i, '');
-				var r = l.test(e);
-				return r || s.test(e)
+				var r = s.test(e);
+				return r || l.test(e)
 					? u(e.slice(2), r ? 2 : 8)
@@ -1442,0 +1444,0 @@ : a.test(e)

package.json

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

src/components/PlaceholderWithoutTracking.jsx

@@ -53,3 +53,3 @@ import React from 'react';
 
-	componentWillUnMount() {
+	componentWillUnmount() {
 		if (this.LAZY_LOAD_OBSERVER) {
@@ -122,2 +122,15 @@ this.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder);
 
+		const styleProp = {
+			display: 'inline-block',
+			...style,
+		};
+
+		if (typeof width !== 'undefined') {
+			styleProp.width = width;
+		}
+
+		if (typeof height !== 'undefined') {
+			styleProp.height = height;
+		}
+
 		return (
@@ -127,3 +140,3 @@ <span
 				ref={el => (this.placeholder = el)}
-				style={{ display: 'inline-block', height, width, ...style }}
+				style={styleProp}
 			>
@@ -139,3 +152,3 @@ {placeholder}
 	className: PropTypes.string,
-	height: PropTypes.number,
+	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 	placeholder: PropTypes.element,
@@ -148,3 +161,3 @@ threshold: PropTypes.number,
 	}),
-	width: PropTypes.number,
+	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
@@ -154,9 +167,7 @@
 	className: '',
-	height: 0,
 	placeholder: null,
 	threshold: 100,
 	useIntersectionObserver: true,
-	width: 0,
 };
 
 export default PlaceholderWithoutTracking;

No alert changes

Improved metrics

Total package byte prevSize

88044

increased by0.36%

Lines of code

2604

increased by0.39%

No dependency changes