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
imagesrequired	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

1. Clone the repository
2. nvm use and npm install
3. npm start and open localhost:8080
4. Submit a pull request

Notes

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