Add new prop: 'wrapperClassName'

Author: Aljullu

README.md

@@ -63,6 +63,7 @@ export default MyImage;
 | 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. |
+| 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. |
 | ... |  |  | Any other image attribute |
 
 

src/components/LazyLoadImage.jsx

@@ -29,7 +29,7 @@ class LazyLoadImage extends React.Component {
   getImg() {
     const { afterLoad, beforeLoad, delayMethod, delayTime, effect,
       placeholder, placeholderSrc, scrollPosition, threshold,
-      visibleByDefault, ...imgProps } = this.props;
+      visibleByDefault, wrapperClassName, ...imgProps } = this.props;
 
     return <img onLoad={this.onImageLoad()} {...imgProps} />;
   }
@@ -58,7 +58,8 @@ class LazyLoadImage extends React.Component {
   }
 
   getWrappedLazyLoadImage(lazyLoadImage) {
-    const { effect, height, placeholderSrc, width } = this.props;
+    const { effect, height, placeholderSrc,
+      width, wrapperClassName } = this.props;
     const { loaded } = this.state;
 
     const loadedClassName = loaded ?
@@ -67,7 +68,8 @@ class LazyLoadImage extends React.Component {
 
     return (
       <span
-        className={'lazy-load-image-background ' + effect + loadedClassName}
+        className={wrapperClassName + ' lazy-load-image-background ' +
+          effect + loadedClassName}
         style={{
           backgroundImage: 'url( ' + placeholderSrc + ')',
           backgroundSize: '100% 100%',