v0.5.3

Author: ben

CHANGELOG.md

@@ -1,5 +1,9 @@
 # react-grid-gallery
 
+### v0.5.3 / 2018-09-30
+
+* Added `nano` prop and functionality for base64 4x4 image placeholders [PR 101](https://github.com/benhowell/react-grid-gallery/pull/101). Thanks [Vadimuz](https://github.com/vadimuz).
+
 ### v0.5.2 / 2018-09-15
 
 * Added currentImageWillChange [PR 97](https://github.com/benhowell/react-grid-gallery/pull/97). Function to execute before lightbox image change. Useful for tracking current image shown in lightbox. Thanks [Approximator](https://github.com/approximator).

README.md

@@ -66,7 +66,7 @@ src                     | string        | undefined     | Required. A string ref
 thumbnail               | string        | undefined     | Required. A string referring to any valid image resource (file, url, etc).
 thumbnailWidth          | number        | undefined     | Required. Width of the thumbnail image.
 thumbnailHeight         | number        | undefined     | Required. Height of the thumbnail image.
-nano                    | string:base64 | undefined     | Optional. Thumbnail Base64 image will be injected to background under the main image, that is waiting for a loading. This is super helpful and fancy if you receive base64 images 4x4 pixels from the server-side response.
+nano                    | string:base64 | undefined     | Optional. Thumbnail Base64 image will be injected to background under the main image. This provides a base64, 4x4 generated image whilst the image is beong loaded.
 alt                     | string        | ""            | Optional. Image alt attribute.
 tags                    | array         | undefined     | Optional. An array of objects containing tag attributes (value and title). e.g. `{value: "foo", title: "bar"}`
 isSelected              | bool          | undefined     | Optional. The selected state of the image.
@@ -195,6 +195,8 @@ React Grid Gallery is free to use for personal and commercial projects under the
 
 * [Approximator](https://github.com/approximator) for currentImageWillChange (Function to execute before lightbox image change) [PR 97](https://github.com/benhowell/react-grid-gallery/pull/97).
 
+* [Vadimuz](https://github.com/vadimuz) for nano image props and functionality [PR 101](https://github.com/benhowell/react-grid-gallery/pull/101).
+
  * Demo stock photos:
    * [Jeshu John - designerspics.com](http://designerspics.com)
    * [Gratisography](http://gratisography.com)

lib/Gallery.js

@@ -356,6 +356,7 @@ Gallery.displayName = 'Gallery';
 Gallery.propTypes = {
     images: _propTypes2.default.arrayOf(_propTypes2.default.shape({
         src: _propTypes2.default.string.isRequired,
+        nano: _propTypes2.default.string,
         alt: _propTypes2.default.string,
         thumbnail: _propTypes2.default.string.isRequired,
         srcset: _propTypes2.default.array,

lib/Image.js

@@ -62,17 +62,25 @@ var Image = function (_Component) {
         key: 'tileViewportStyle',
         value: function tileViewportStyle() {
             if (this.props.tileViewportStyle) return this.props.tileViewportStyle.call(this);
-            if (this.props.item.isSelected) return {
+            var nanoBase64Backgorund = {};
+            if (this.props.item.nano) {
+                nanoBase64Backgorund = {
+                    background: 'url(' + this.props.item.nano + ')',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center center'
+                };
+            }
+            if (this.props.item.isSelected) return Object.assign({
                 width: this.props.item.vwidth - 32,
                 height: this.props.height - 32,
                 margin: 16,
                 overflow: "hidden"
-            };
-            return {
+            }, nanoBase64Backgorund);
+            return Object.assign({
                 width: this.props.item.vwidth,
                 height: this.props.height,
                 overflow: "hidden"
-            };
+            }, nanoBase64Backgorund);
         }
     }, {
         key: 'thumbnailStyle',

lib/react-grid-gallery.bundle.min.js

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-gallery",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Justified gallery component for React.",
   "main": "lib/Gallery.js",
   "dependencies": {