From 1b7294885f6b193077c14698f99c6fbcde9779d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Sat, 16 Mar 2019 13:58:38 +0100 Subject: [PATCH 1/2] Add loadedImageProps prop --- README.md | 1 + src/components/LazyLoadImage.jsx | 13 +++++++++++-- src/components/LazyLoadImage.spec.js | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index be021d9..b67d1e0 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ export default MyImage; | delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. | | delayTime | `Number` | 300 | Time in ms sent to the delayMethod. | | effect | `String` | | Name of the effect to use. Please, read next section with an explanation on how to use them. | +| loadedImageProps | `Object` | | Props passed to the `` element once it's loaded. Useful to pass class names or style attributes that should only be applied once the image is loaded. | | placeholder | `ReactClass` | `` | React element to use as a placeholder. | | placeholderSrc | `String` | | Image src to display while the image is not visible or loaded. | | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. | diff --git a/src/components/LazyLoadImage.jsx b/src/components/LazyLoadImage.jsx index 2fcf9e2..0ef4587 100644 --- a/src/components/LazyLoadImage.jsx +++ b/src/components/LazyLoadImage.jsx @@ -28,10 +28,17 @@ class LazyLoadImage extends React.Component { getImg() { const { afterLoad, beforeLoad, delayMethod, delayTime, effect, - placeholder, placeholderSrc, scrollPosition, threshold, + loadedImageProps, placeholder, placeholderSrc, scrollPosition, threshold, visibleByDefault, wrapperClassName, ...imgProps } = this.props; + const { loaded } = this.state; + const loadedProps = loaded ? loadedImageProps : null; - return ; + return ( + + ); } getLazyLoadImage(image) { @@ -105,6 +112,7 @@ LazyLoadImage.propTypes = { delayMethod: PropTypes.string, delayTime: PropTypes.number, effect: PropTypes.string, + loadedImageProps: PropTypes.object, placeholderSrc: PropTypes.string, threshold: PropTypes.number, visibleByDefault: PropTypes.bool, @@ -117,6 +125,7 @@ LazyLoadImage.defaultProps = { delayMethod: 'throttle', delayTime: 300, effect: '', + loadedImageProps: {}, placeholderSrc: '', threshold: 100, visibleByDefault: false, diff --git a/src/components/LazyLoadImage.spec.js b/src/components/LazyLoadImage.spec.js index 2515579..e882bc0 100644 --- a/src/components/LazyLoadImage.spec.js +++ b/src/components/LazyLoadImage.spec.js @@ -99,6 +99,22 @@ describe('LazyLoadImage', function() { expect(loadedWrapper.style.getPropertyValue('background-size')).toEqual(''); }); + it('sets correct props to the loaded image', function() { + const lazyLoadImage = mount( + + ); + + let img = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'img'); + + expect(img.className).toEqual('lorem'); + + Simulate.load(img); + + img = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'img'); + + expect(img.className).toEqual('ipsum'); + }); + it('adds the effect class', function() { const lazyLoadImage = mount( From 9fc73b0d7cde5bb6b8d37d4f1f2459504c4cac47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Wed, 7 Aug 2019 19:33:59 +0200 Subject: [PATCH 2/2] Add placeholderProps prop --- README.md | 1 + src/components/LazyLoadImage.jsx | 30 ++++++++++++++++++---------- src/components/LazyLoadImage.spec.js | 16 +++++++++++++++ 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b67d1e0..3ca1b08 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ export default MyImage; | effect | `String` | | Name of the effect to use. Please, read next section with an explanation on how to use them. | | loadedImageProps | `Object` | | Props passed to the `` element once it's loaded. Useful to pass class names or style attributes that should only be applied once the image is loaded. | | placeholder | `ReactClass` | `` | React element to use as a placeholder. | +| placeholderProps | `Object` | | Props assigned to the placeholder , useful to overwrite the style or assign other HTML attributes. | | placeholderSrc | `String` | | Image src to display while the image is not visible or loaded. | | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. | | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. | diff --git a/src/components/LazyLoadImage.jsx b/src/components/LazyLoadImage.jsx index 0ef4587..d8dd9ad 100644 --- a/src/components/LazyLoadImage.jsx +++ b/src/components/LazyLoadImage.jsx @@ -28,8 +28,9 @@ class LazyLoadImage extends React.Component { getImg() { const { afterLoad, beforeLoad, delayMethod, delayTime, effect, - loadedImageProps, placeholder, placeholderSrc, scrollPosition, threshold, - visibleByDefault, wrapperClassName, ...imgProps } = this.props; + loadedImageProps, placeholder, placeholderProps, placeholderSrc, + scrollPosition, threshold, visibleByDefault, wrapperClassName, + ...imgProps } = this.props; const { loaded } = this.state; const loadedProps = loaded ? loadedImageProps : null; @@ -65,26 +66,31 @@ class LazyLoadImage extends React.Component { } getWrappedLazyLoadImage(lazyLoadImage) { - const { effect, height, placeholderSrc, + const { effect, height, placeholderProps, placeholderSrc, width, wrapperClassName } = this.props; const { loaded } = this.state; const loadedClassName = loaded ? ' lazy-load-image-loaded' : ''; + const props = { + ...placeholderProps, + style: { + backgroundImage: loaded ? '' : 'url( ' + placeholderSrc + ')', + backgroundSize: loaded ? '' : '100% 100%', + color: 'transparent', + display: 'inline-block', + height: height, + width: width, + ...placeholderProps.style, + }, + }; return ( + { ...props }> {lazyLoadImage} ); @@ -113,6 +119,7 @@ LazyLoadImage.propTypes = { delayTime: PropTypes.number, effect: PropTypes.string, loadedImageProps: PropTypes.object, + placeholderProps: PropTypes.object, placeholderSrc: PropTypes.string, threshold: PropTypes.number, visibleByDefault: PropTypes.bool, @@ -126,6 +133,7 @@ LazyLoadImage.defaultProps = { delayTime: 300, effect: '', loadedImageProps: {}, + placeholderProps: {}, placeholderSrc: '', threshold: 100, visibleByDefault: false, diff --git a/src/components/LazyLoadImage.spec.js b/src/components/LazyLoadImage.spec.js index e882bc0..96e8e25 100644 --- a/src/components/LazyLoadImage.spec.js +++ b/src/components/LazyLoadImage.spec.js @@ -158,4 +158,20 @@ describe('LazyLoadImage', function() { expect(span.length).toEqual(0); }); + + it('renders placeholder with correct style', function() { + const lazyLoadImage = mount( + + ); + + const span = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'span'); + + expect(span.style.getPropertyValue('display')).toEqual('block'); + expect(span.getAttribute('aria-hidden')).toEqual('true'); + }); });