Add way to inject a custom thumbnail image component (for lazy-loading)

README.md

@@ -94,6 +94,7 @@ lightboxWillClose       | func          | undefined     | Optional. Function to
 tagStyle 	        | object 	| tagStyle 	| Optional. Style to pass to tag elements. Overrides internal tag style.
 tileViewportStyle 	| func 	        | tileViewportStyle | Optional. Function to style the image tile viewport. Allows access to image object using `this` (See [Programmers notes](#programmers-notes) for more info about implicit `this`). Overrides internal tileViewportStyle function.
 thumbnailStyle 	        | func 	        | thumbnailStyle | Optional. Function to style the image thumbnail. Allows access to image object using `this` (See [Programmers notes](#programmers-notes) for more info about implicit `this`). Overrides internal thumbnailStyle function.
+thumbnailImageComponent | React component | undefined   | Optional. Substitute in a React component that would get passed `imageProps` (the props that would have been passed to the `<img>` tag) and `item` (the original item in `images`) to be used to render thumbnails; useful for lazy loading.
 
 ## Lightbox Options
 NOTE: these options are passed inside the Gallery tag.

examples/demo7.js

@@ -0,0 +1,134 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Gallery from '../src/Gallery';
+
+class ImageComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            show: false
+        };
+    }
+
+    render () {
+        if (this.state.show) {
+            return <img {...this.props.imageProps} />;
+        } else {
+            return (
+                <div
+                    style={Object.assign({}, this.props.imageProps.style, { textAlign: 'center' })}
+                    onMouseOver={() => this.setState({ show: true })}
+                >
+                    Hover to show
+                </div>
+            );
+        }
+    }
+}
+
+class Demo7 extends React.Component {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            images: this.props.images
+        };
+    }
+
+    render () {
+        return (
+                <div style={{
+                    display: "block",
+                    minHeight: "1px",
+                    width: "100%",
+                    border: "1px solid #ddd",
+                    overflow: "auto"}}>
+                <Gallery
+            images={this.state.images}
+            lightboxWidth={1536}
+            thumbnailImageComponent={ImageComponent}
+            enableLightbox={true}
+            enableImageSelection={false}
+                />
+                </div>
+        );
+    }
+}
+
+Demo7.propTypes = {
+    images: PropTypes.arrayOf(
+        PropTypes.shape({
+            src: PropTypes.string.isRequired,
+            thumbnail: PropTypes.string.isRequired,
+            srcset: PropTypes.array,
+            caption: PropTypes.string,
+            thumbnailWidth: PropTypes.number.isRequired,
+            thumbnailHeight: PropTypes.number.isRequired,
+            isSelected: PropTypes.bool
+        })
+    ).isRequired
+};
+
+Demo7.defaultProps = {
+    images: shuffleArray([
+        {
+            src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg",
+            thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
+            thumbnailWidth: 240,
+            thumbnailHeight: 320,
+            caption: "8H (gratisography.com)"
+        },
+        {
+            src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg",
+            thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 190,
+            caption: "286H (gratisography.com)"
+        },
+        {
+            src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg",
+            thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 148,
+            caption: "315H (gratisography.com)"
+        },
+        {
+            src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
+            thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 213,
+            caption: "201H (gratisography.com)"
+        },
+        {
+            src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg",
+            thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg",
+            thumbnailWidth: 248,
+            thumbnailHeight: 320,
+            caption: "Big Ben (Tom Eversley - isorepublic.com)"
+        },
+        {
+            src: "https://c1.staticflickr.com/9/8785/28687743710_870813dfde_h.jpg",
+            thumbnail: "https://c1.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 113,
+            caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)"
+        },
+        {
+            src: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_b.jpg",
+            thumbnail: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_n.jpg",
+            thumbnailWidth: 313,
+            thumbnailHeight: 320,
+            caption: "Wood Glass (Tom Eversley - isorepublic.com)"
+        },
+        {
+            src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg",
+            thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 213,
+            caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
+        }
+    ])
+};
+
+ReactDOM.render(<Demo7 />, document.getElementById('demo7'));

examples/index.html

@@ -122,6 +122,13 @@ <h3><a id="custom-controls" class="anchor" href="#custom-controls" aria-hidden="
 
 <div id="demo6"></div>
 <h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/examples/demo6.js">Code</a></h4>
+<br>
+
+<h3><a id="custom-image-component" class="anchor" href="#custom-image-component" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom Image Component (useful for lazy loading)
+</h3>
+
+<div id="demo7"></div>
+<h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/examples/demo7.js">Code</a></h4>
 <br>
 
       <footer class="site-footer">

src/Gallery.js

@@ -263,6 +263,7 @@ class Gallery extends Component {
             tagStyle={this.props.tagStyle}
             tileViewportStyle={this.props.tileViewportStyle}
             thumbnailStyle={this.props.thumbnailStyle}
+            thumbnailImageComponent={this.props.thumbnailImageComponent}
                 />;});
         var resizeIframeStyles = {
             height: 0,
@@ -362,7 +363,8 @@ Gallery.propTypes = {
     thumbnailStyle: PropTypes.func,
     showLightboxThumbnails: PropTypes.bool,
     onClickLightboxThumbnail: PropTypes.func,
-    tagStyle: PropTypes.object
+    tagStyle: PropTypes.object,
+    thumbnailImageComponent: PropTypes.func
 };
 
 Gallery.defaultProps = {
@@ -380,7 +382,7 @@ Gallery.defaultProps = {
     showCloseButton: true,
     showImageCount: true,
     lightboxWidth: 1024,
-    showLightboxThumbnails: false
+    showLightboxThumbnails: false,
 };
 
 module.exports = Gallery;

src/Image.js

@@ -34,7 +34,7 @@ class Image extends Component {
             return this.props.tileViewportStyle.call(this);
         var nanoBase64Backgorund = {}
         if(this.props.item.nano) {
-            nanoBase64Backgorund = { 
+            nanoBase64Backgorund = {
                 background: `url(${this.props.item.nano})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center center'
@@ -161,6 +161,16 @@ class Image extends Component {
             {this.props.item.customOverlay}
         </div>;
 
+        var thumbnailProps = {
+            key: "img-"+this.props.index,
+            src: this.props.item.thumbnail,
+            alt: alt,
+            title: this.props.item.caption,
+            style: this.thumbnailStyle(),
+        };
+
+        var ThumbnailImageComponent = this.props.thumbnailImageComponent;
+
         return (
                 <div className="tile"
             key={"tile-"+this.props.index}
@@ -221,12 +231,9 @@ class Image extends Component {
             key={"tile-viewport-"+this.props.index}
             onClick={this.props.onClick ?
                      (e) => this.props.onClick.call(this, this.props.index, e) : null}>
-                <img
-            key={"img-"+this.props.index}
-            src={this.props.item.thumbnail}
-            alt={alt}
-            title={this.props.item.caption}
-            style={this.thumbnailStyle()} />
+                {ThumbnailImageComponent ?
+                    <ThumbnailImageComponent {...this.props} imageProps={thumbnailProps} /> :
+                    <img {...thumbnailProps} />}
                 </div>
                 {this.props.item.thumbnailCaption && (
                         <div className="tile-description"
@@ -259,7 +266,8 @@ Image.propTypes = {
     tileViewportStyle: PropTypes.func,
     thumbnailStyle: PropTypes.func,
     tagStyle: PropTypes.object,
-    customOverlay: PropTypes.element
+    customOverlay: PropTypes.element,
+    thumbnailImageComponent: PropTypes.func
 };
 
 Image.defaultProps = {