| tags | array | Optional. An array of objects containing tag attributes (value, title and key if value is element). e.g. `{value: "foo", title: "bar"}` or `{value: {tag.name}, title: tag.title, key: tag.key}` || id | string | Optional, default `ReactGridGallery`. `id` attribute for `` tag. This prop may be useful for those who wish to discriminate between multiple galleries. |

| enableImageSelection    | bool                      | Optional, default true. Allow images to be selectable. Setting this option to false whilst supplying images with isSelected: true will result in those images being permanently selected.                                              |

| onSelect                | func                      | Optional. Function to execute when an image is selected. Optional args: index (index of selected image in images array), image (the selected image), event. This function is only executable when enableImageSelection: true.        |

| rowHeight               | number                    | Optional, default 180. The height of each row in the gallery.                                                                                                                                                                              |

| maxRows                 | number                    | Optional. The maximum number of rows to show in the gallery.                                                                                                                                                                                 |

| margin                  | number                    | Optional, default 2. The margin around each image in the gallery.                                                                                                                                                                          |

| onClick                 | func                      | Optional. Function to execute when gallery image clicked. Optional args: index (index of selected image in images array), image (the clicked image), event (the click event).                                                            |

| tagStyle                | func | CSSProperties | Optional. Style or function that returns style to pass to tag elements. Optional args: item (the image item in images). Overrides internal tag style.                                                                                    |

| tileViewportStyle       | func | CSSProperties | Optional. Style or function to style the image tile viewport. Optional args: item (the image item in images). Overrides internal tileViewportStyle function.                                                                             |

| thumbnailStyle          | func | CSSProperties | Optional. Style or function to style the image thumbnail. Optional args: item (the image item in images). Overrides internal thumbnailStyle function.                                                                                    |

| thumbnailImageComponent | React component | Optional. Substitute in a React component that would get passed `imageProps` (the props that would have been passed to the `` tag) and `item` (the original item in `images`) to be used to render thumbnails; useful for lazy loading. |

| defaultContainerWidth   | number                    | Optional. Set default width for the container. This option is useful during server-side rendering when we want to generate an initial markup before we can detect the actual container width.                                                |

General Notes

react-grid-gallery is built for modern browsers and therefore IE support is limited to IE 11 and newer.

As the inspiration for this component comes from Google Photos, very small thumbnails may not be the most aesthetically pleasing due to the border size applied when selected. A sensible rowHeight default of 180px has been chosen, but rowHeights down to 100px are still reasonable.

Gallery width is determined by the containing element. Therefore your containing element must have a width (%, em, px, whatever) _before_ the gallery is loaded!

If you don't know your width and height values, you can find these out using any number of javascript hacks, bearing in mind the load penalty associated with these methods.

Contributing

All contributions to react-grid-gallery are very welcome. Feature requests, issue reports and pull requests are greatly appreciated. Please follow the contribution guidelines

License

React Grid Gallery is free to use for personal and commercial projects under the MIT License. Attribution is not required, but appreciated.

Acknowledgements

Visual design inspired by Google Photos.

Thumbnail viewport implementation inspired by GPlusGallery by Florian Maul.

Backend lightbox functionality via React Images by jossmac.

The following gallery functions were obtained from the React Images example demo: closeLightbox, gotoNext, gotoPrevious, handleClickImage, openLightbox.

cust0dian for critical bug fixes in PR 6 and PR 7.

ValYouW for lightboxWillOpen and lightBoxWillClose functionality PR 20 and customOverlay option: PR 22.

danalloway for theme pass-through prop PR 27

SimeonC for _update thumbnails when maxRows changes_ PR 35 and _resize on scrollbar presence change_ PR 40

jakub-tucek for thumbnailCaption functionality PR 42

mis94 for EXIF image rotation functionality PR 67

forforf for contentWindow check PR 77

ScottMRafferty for preloadNextImage not propagating to Lightbox fix PR 78

Approximator for currentImageWillChange (Function to execute before lightbox image change) PR 97.

Vadimuz for nano image props and functionality PR 101.

pxpeterxu for adding functionality to inject a custom thumbnail image component (for lazy-loading) PR 104.

lryta for fixing crash when this.props.images.length - 1 < this.state.currentImage PR #111.

jimishf for lightBoxProps option to assign any prop directly to lightbox PR #121.

Demo stock photos:

   Jeshu John - designerspics.com

   Gratisography

   Tom Eversley - isorepublic.com

   Jan Vasek - jeshoots.com

   moveast.me

   贝莉儿 NG. - unsplash.com

   Matthew Wiebe. - unsplash.com