react-easy-image-gallery

A beautiful <Gallery /> inspired by layouts of flickr and Google Photos

Features:

responsive without scaling down pictures like other libraries
works with images of varying aspect ratios
8kb unminified
works on Chrome, Firefox, Edge, and IE10

Live Demo and Example

https://coldshower.github.io/react-easy-image-gallery

Installation

npm install react-easy-image-gallery

Using it

import { Gallery } from 'react-easy-image-gallery';

// ...
<Gallery 
  images={[
    { 
      src: 'SOME_URL',
      width: 540,
      height: 1000
    },
    {
      src: 'SOME_OTHER_URL',
      width: 200,
      height: 121
    },
    ...etc
  ]}
/>
// ...

Check the demo for a more real life example!

Props

Name	Type	Default	Description
images`required`	array		is an array of objects with the keys src, width, and height
columnWidth	number	250	default usually will suffice but if you want each picture to take up more room in a row, then increase this until satisfied
imageLoadingColor	string	`#f3f3f3`	background color of image placeholder while the image is loading

Contributing

Clone the repository
nvm use and npm install
npm start and open localhost:8080
Submit a pull request

Notes

Stock photos are from Pixabay's Developer API and can be found here https://pixabay.com/en/photos/yosemite/.