Add placeholderProps prop

Author: Aljullu

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 `<img>` 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` | `<span>` | React element to use as a placeholder. |
+| placeholderProps | `Object` | | Props assigned to the placeholder <span>, 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. |

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 (
       <span
         className={wrapperClassName + ' lazy-load-image-background ' +
           effect + loadedClassName}
-        style={{
-          backgroundImage: loaded ? '' : 'url( ' + placeholderSrc + ')',
-          backgroundSize: loaded ? '' : '100% 100%',
-          color: 'transparent',
-          display: 'inline-block',
-          height: height,
-          width: width,
-        }}>
+        { ...props }>
         {lazyLoadImage}
       </span>
     );
@@ -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,

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(
+      <LazyLoadImage
+        placeholderSrc="lorem-ipsum.jpg"
+        placeholderProps={{
+          'aria-hidden': 'true',
+          style: { display: 'block' },
+        }} />
+    );
+
+    const span = findRenderedDOMComponentWithTag(lazyLoadImage.instance(), 'span');
+
+    expect(span.style.getPropertyValue('display')).toEqual('block');
+    expect(span.getAttribute('aria-hidden')).toEqual('true');
+  });
 });