React Image Gallery

I recently published a React component called 'react-photo-gallery' that responsively displays a gallery of photos. You can see a visual preview here and view code and contribute on Github.


Of course, the gallery had to be responsive. Due to the nature of having these photos line up properly with a common height whilst maintaining aspect ratio, it would normally require a lot of DOM manipulation of the image attributes should the user resize the browser. Thankfully, React handles this very well due to the Virtual DOM. As you resize the window you will notice the images attributes changing by the component re-rendering. I'm not even using CSS Media queries here because instead of looking at browser width I'm looking at container width. Something easier and simple to handle in JavaScript.

Less Clutter

The inspiration for this layout came from Flickr's photostream. You can compare my photostream on Flickr with my site using the react-photo-gallery component and see there is just a lot less clutter. The viewer can actually focus on the photos and not menu bars, a rather useless banner, and other unnecessary items. I'm still using my photos hosted on Flickr by calling their API because having Flickr deal with sizing and storing so many photos is very convenient. I'm basically using them as CDN.

Srcset Support

Another thing I wanted was for the main images displayed in the "lightbox" to have the ability to use srcset. I'm using another React component called react-images that supports srcset.

For more on how to install via NPM, visit the repo on Github.



Read more posts by this author.