Add wrapperProps for <span> (#70)

* Add wrapper props to image components

* Update docs

* Address PR feedback

Author: johnstonbl01

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 when it is rendered (for example, when using placeholderSrc or effect) |
 | ... |  |  | Any other image attribute |
 
 
@@ -146,7 +147,6 @@ export default Article;
 | useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
 | visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. |
 
-
 ## Using `trackWindowScroll` HOC to improve performance
 
 When you have many elements to lazy load in the same page, you might get poor performance because each one is listening to the scroll/resize events. In that case, it's better to wrap the deepest common parent of those components with a HOC to track those events (`trackWindowScroll`).
@@ -193,6 +193,7 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th
 | placeholder | `ReactClass` | `<span>` | 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 when it is rendered (for example, when using placeholderSrc or effect) |
 | ... |  |  | Any other image attribute |
 
 Component wrapped with `trackWindowScroll` (in the example, `Gallery`)

src/components/LazyLoadImage.jsx

@@ -40,6 +40,7 @@ class LazyLoadImage extends React.Component {
 			useIntersectionObserver,
 			visibleByDefault,
 			wrapperClassName,
+			wrapperProps,
 			...imgProps
 		} = this.props;
 
@@ -89,6 +90,7 @@ class LazyLoadImage extends React.Component {
 			placeholderSrc,
 			width,
 			wrapperClassName,
+			wrapperProps,
 		} = this.props;
 		const { loaded } = this.state;
 
@@ -114,18 +116,26 @@ class LazyLoadImage extends React.Component {
 					height: height,
 					width: width,
 				}}
+				{...wrapperProps}
 			>
 				{lazyLoadImage}
 			</span>
 		);
 	}
 
 	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;
 		}
 
@@ -144,6 +154,7 @@ LazyLoadImage.propTypes = {
 	useIntersectionObserver: PropTypes.bool,
 	visibleByDefault: PropTypes.bool,
 	wrapperClassName: PropTypes.string,
+	wrapperProps: PropTypes.object,
 };
 
 LazyLoadImage.defaultProps = {