Allow custom placeholder

Author: Aljullu

src/components/LazyLoadImage.jsx

@@ -70,17 +70,25 @@ class LazyLoadImage extends React.Component {
       viewport.bottom + threshold >= boundingBox.top);
   }
 
+  getPlaceholder() {
+    const { className, height, placeholder, width } = this.props;
+    if (placeholder) {
+      return placeholder;
+    }
+
+    return (
+      <span className={'lazy-load-image-placeholder ' + className}
+        ref="placeholder"
+        style={{height, width}}>
+      </span>
+    );
+  }
+
   render() {
-    const { scrollPosition, threshold, ...props } = this.props;
+    const { placeholder, scrollPosition, threshold, ...props } = this.props;
 
     if (!this.state.visible) {
-      const { className, height, width } = this.props;
-      return (
-        <span className={'lazy-load-image-placeholder ' + className}
-          ref="placeholder"
-          style={{height, width}}>
-        </span>
-      );
+      return this.getPlaceholder();
     }
 
     return (
@@ -95,13 +103,15 @@ LazyLoadImage.propTypes = {
   scrollPosition: PropTypes.number.isRequired,
   className: PropTypes.string,
   height: PropTypes.number,
+  placeholder: PropTypes.element,
   threshold: PropTypes.number,
   width: PropTypes.number
 };
 
 LazyLoadImage.defaultProps = {
   className: '',
   height: 0,
+  placeholder: null,
   threshold: 100,
   width: 0
 };

src/components/LazyLoadImage.spec.js

@@ -10,9 +10,10 @@ const {
 } = ReactTestUtils;
 
 describe('LazyLoadImage', function() {
-  function renderLazyLoadImage(scrollPosition) {
+  function renderLazyLoadImage(scrollPosition = 0, placeholder = null) {
     return ReactTestUtils.renderIntoDocument(
       <LazyLoadImage
+        placeholder={placeholder}
         scrollPosition={scrollPosition}
         src="" />
     );
@@ -24,22 +25,29 @@ describe('LazyLoadImage', function() {
     expect(img.length).toEqual(numberOfImages);
   }
 
-  function expectPlaceholders(wrapper, numberOfPlaceholders) {
-    const placeholder = scryRenderedDOMComponentsWithClass(wrapper,
-      'lazy-load-image-placeholder');
+  function expectPlaceholders(wrapper, numberOfPlaceholders, placeholderClassName = 'lazy-load-image-placeholder') {
+    const placeholder = scryRenderedDOMComponentsWithClass(wrapper, placeholderClassName);
 
     expect(placeholder.length).toEqual(numberOfPlaceholders);
   }
 
-  it('renders the placeholder when it\'s not in the viewport', function() {
+  it('renders the default placeholder when it\'s not in the viewport', function() {
     const lazyLoadImage = renderLazyLoadImage(-1000);
 
     expectImages(lazyLoadImage, 0);
     expectPlaceholders(lazyLoadImage, 1);
   });
 
+  it('renders the prop placeholder when it\'s not in the viewport', function() {
+    const placeholder = <span className="test-placeholder"></span>;
+    const lazyLoadImage = renderLazyLoadImage(-1000, placeholder);
+
+    expectImages(lazyLoadImage, 0);
+    expectPlaceholders(lazyLoadImage, 1, 'test-placeholder');
+  });
+
   it('renders the image when it\'s in the viewport', function() {
-    const lazyLoadImage = renderLazyLoadImage(0);
+    const lazyLoadImage = renderLazyLoadImage();
 
     expectImages(lazyLoadImage, 1);
     expectPlaceholders(lazyLoadImage, 0);