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 =/>// ...
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
- Clone the repository
nvm use
andnpm install
npm start
and openlocalhost: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/.