From c9544feb68ff010f61d05ffdef660d5a6a64a5c5 Mon Sep 17 00:00:00 2001 From: Blake Johnston Date: Tue, 19 May 2020 13:15:08 -0500 Subject: [PATCH 1/3] Add wrapper props to image components --- src/components/LazyLoadComponent.jsx | 3 +++ src/components/LazyLoadImage.jsx | 6 ++++++ src/components/PlaceholderWithoutTracking.jsx | 11 ++++++++++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/LazyLoadComponent.jsx b/src/components/LazyLoadComponent.jsx index 2b59e41..37066ca 100644 --- a/src/components/LazyLoadComponent.jsx +++ b/src/components/LazyLoadComponent.jsx @@ -65,6 +65,7 @@ class LazyLoadComponent extends React.Component { threshold, useIntersectionObserver, width, + wrapperProps, } = this.props; if ( @@ -82,6 +83,7 @@ class LazyLoadComponent extends React.Component { threshold={threshold} useIntersectionObserver={useIntersectionObserver} width={width} + wrapperProps={wrapperProps} /> ); } @@ -97,6 +99,7 @@ class LazyLoadComponent extends React.Component { style={style} threshold={threshold} width={width} + wrapperProps={wrapperProps} /> ); } diff --git a/src/components/LazyLoadImage.jsx b/src/components/LazyLoadImage.jsx index 1a8ed60..30b1f17 100644 --- a/src/components/LazyLoadImage.jsx +++ b/src/components/LazyLoadImage.jsx @@ -40,6 +40,7 @@ class LazyLoadImage extends React.Component { useIntersectionObserver, visibleByDefault, wrapperClassName, + wrapperProps, ...imgProps } = this.props; @@ -60,6 +61,7 @@ class LazyLoadImage extends React.Component { useIntersectionObserver, visibleByDefault, width, + wrapperProps, } = this.props; return ( @@ -76,6 +78,7 @@ class LazyLoadImage extends React.Component { useIntersectionObserver={useIntersectionObserver} visibleByDefault={visibleByDefault} width={width} + wrapperProps={wrapperProps} > {this.getImg()} @@ -89,6 +92,7 @@ class LazyLoadImage extends React.Component { placeholderSrc, width, wrapperClassName, + wrapperProps, } = this.props; const { loaded } = this.state; @@ -114,6 +118,7 @@ class LazyLoadImage extends React.Component { height: height, width: width, }} + {...wrapperProps} > {lazyLoadImage} @@ -144,6 +149,7 @@ LazyLoadImage.propTypes = { useIntersectionObserver: PropTypes.bool, visibleByDefault: PropTypes.bool, wrapperClassName: PropTypes.string, + wrapperProps: PropTypes.object, }; LazyLoadImage.defaultProps = { diff --git a/src/components/PlaceholderWithoutTracking.jsx b/src/components/PlaceholderWithoutTracking.jsx index 2b47a18..b8cb6d9 100644 --- a/src/components/PlaceholderWithoutTracking.jsx +++ b/src/components/PlaceholderWithoutTracking.jsx @@ -110,7 +110,14 @@ class PlaceholderWithoutTracking extends React.Component { } render() { - const { className, height, placeholder, style, width } = this.props; + const { + className, + height, + placeholder, + style, + width, + wrapperProps, + } = this.props; if (placeholder && typeof placeholder.type !== 'function') { return React.cloneElement(placeholder, { @@ -136,6 +143,7 @@ class PlaceholderWithoutTracking extends React.Component { className={className} ref={el => (this.placeholder = el)} style={styleProp} + {...wrapperProps} > {placeholder} @@ -155,6 +163,7 @@ PlaceholderWithoutTracking.propTypes = { y: PropTypes.number.isRequired, }), width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + wrapperProps: PropTypes.object, }; PlaceholderWithoutTracking.defaultProps = { From 60f4b0231297aebe081179b498bacdb80188665b Mon Sep 17 00:00:00 2001 From: Blake Johnston Date: Tue, 19 May 2020 13:18:39 -0500 Subject: [PATCH 2/3] Update docs --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index f05008d..d61ac40 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@ export default MyImage; | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. | | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. | | wrapperClassName | `String` | | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. | +| wrapperProps | `Object` | null | Props that should be passed to the wrapper span | | ... | | | Any other image attribute | @@ -145,6 +146,7 @@ export default Article; | threshold | `Number` | 100 | Threshold in pixels. So the component starts loading before it appears in the viewport. | | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. | | visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. | +| wrapperProps | `Object` | null | Props that should be passed to the wrapper span | ## Using `trackWindowScroll` HOC to improve performance @@ -193,6 +195,7 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th | placeholder | `ReactClass` | `` | React element to use as a placeholder. | | 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. | +| wrapperProps | `Object` | null | Props that should be passed to the wrapper span | | ... | | | Any other image attribute | Component wrapped with `trackWindowScroll` (in the example, `Gallery`) From e4c40032b472d79c02d3b278b5dc1d5aa46e8329 Mon Sep 17 00:00:00 2001 From: Blake Johnston Date: Thu, 28 May 2020 22:42:56 -0500 Subject: [PATCH 3/3] Address PR feedback --- README.md | 6 ++---- src/components/LazyLoadComponent.jsx | 3 --- src/components/LazyLoadImage.jsx | 13 +++++++++---- src/components/PlaceholderWithoutTracking.jsx | 11 +---------- 4 files changed, 12 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index d61ac40..b096b39 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ export default MyImage; | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. | | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. | | wrapperClassName | `String` | | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. | -| wrapperProps | `Object` | null | Props that should be passed to the wrapper span | +| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) | | ... | | | Any other image attribute | @@ -146,8 +146,6 @@ export default Article; | threshold | `Number` | 100 | Threshold in pixels. So the component starts loading before it appears in the viewport. | | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. | | visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. | -| wrapperProps | `Object` | null | Props that should be passed to the wrapper span | - ## Using `trackWindowScroll` HOC to improve performance @@ -195,7 +193,7 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th | placeholder | `ReactClass` | `` | React element to use as a placeholder. | | 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. | -| wrapperProps | `Object` | null | Props that should be passed to the wrapper span | +| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) | | ... | | | Any other image attribute | Component wrapped with `trackWindowScroll` (in the example, `Gallery`) diff --git a/src/components/LazyLoadComponent.jsx b/src/components/LazyLoadComponent.jsx index 37066ca..2b59e41 100644 --- a/src/components/LazyLoadComponent.jsx +++ b/src/components/LazyLoadComponent.jsx @@ -65,7 +65,6 @@ class LazyLoadComponent extends React.Component { threshold, useIntersectionObserver, width, - wrapperProps, } = this.props; if ( @@ -83,7 +82,6 @@ class LazyLoadComponent extends React.Component { threshold={threshold} useIntersectionObserver={useIntersectionObserver} width={width} - wrapperProps={wrapperProps} /> ); } @@ -99,7 +97,6 @@ class LazyLoadComponent extends React.Component { style={style} threshold={threshold} width={width} - wrapperProps={wrapperProps} /> ); } diff --git a/src/components/LazyLoadImage.jsx b/src/components/LazyLoadImage.jsx index 30b1f17..eb739a4 100644 --- a/src/components/LazyLoadImage.jsx +++ b/src/components/LazyLoadImage.jsx @@ -61,7 +61,6 @@ class LazyLoadImage extends React.Component { useIntersectionObserver, visibleByDefault, width, - wrapperProps, } = this.props; return ( @@ -78,7 +77,6 @@ class LazyLoadImage extends React.Component { useIntersectionObserver={useIntersectionObserver} visibleByDefault={visibleByDefault} width={width} - wrapperProps={wrapperProps} > {this.getImg()} @@ -126,11 +124,18 @@ class LazyLoadImage extends React.Component { } render() { - const { effect, placeholderSrc, visibleByDefault } = this.props; + const { + effect, + placeholderSrc, + visibleByDefault, + wrapperClassName, + wrapperProps, + } = this.props; const lazyLoadImage = this.getLazyLoadImage(); + const needsWrapper = (effect || placeholderSrc) && !visibleByDefault; - if ((!effect && !placeholderSrc) || visibleByDefault) { + if (!needsWrapper && !wrapperClassName && !wrapperProps) { return lazyLoadImage; } diff --git a/src/components/PlaceholderWithoutTracking.jsx b/src/components/PlaceholderWithoutTracking.jsx index b8cb6d9..2b47a18 100644 --- a/src/components/PlaceholderWithoutTracking.jsx +++ b/src/components/PlaceholderWithoutTracking.jsx @@ -110,14 +110,7 @@ class PlaceholderWithoutTracking extends React.Component { } render() { - const { - className, - height, - placeholder, - style, - width, - wrapperProps, - } = this.props; + const { className, height, placeholder, style, width } = this.props; if (placeholder && typeof placeholder.type !== 'function') { return React.cloneElement(placeholder, { @@ -143,7 +136,6 @@ class PlaceholderWithoutTracking extends React.Component { className={className} ref={el => (this.placeholder = el)} style={styleProp} - {...wrapperProps} > {placeholder} @@ -163,7 +155,6 @@ PlaceholderWithoutTracking.propTypes = { y: PropTypes.number.isRequired, }), width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - wrapperProps: PropTypes.object, }; PlaceholderWithoutTracking.defaultProps = {