A stateless responsive React photo gallery component

A stateless responsive React photo gallery component

React Responsive Photo Gallery A stateless responsive React photo gallery component that maintains the original aspect ratio of your photos and scales them responsively. Add your own routing, lightbox, and manage your own state. Installation To install: n

React Photo Gallery

Join the chat at https://gitter.im/react-photo-gallery/Lobby npm version npm downloads Build Status Coverage Status Dependency Status

  • Responsive, accessible, composable, and customizable image gallery component
  • Maintains the original aspect ratio of your photos
  • Creates a masonry style layout
  • Uses actual image elements, optionally pass in srcSet and sizes attributes
  • Supports row or column direction layout
  • Supports passing in a custom image component for implementation of things like image selection, favorites, captions, or whatever your little heart desires!
  • SSR app compatible

Preview

Installation

To install:

yarn add react-photo-gallery

Documentation and Examples

http://neptunian.github.io/react-photo-gallery/

Direct CodeSandbox Links with Examples and Use Cases

To build some examples locally, run:

yarn install
yarn start

Then open localhost:8000 in a browser.

Use


const photos = [
  {
    src: 'http://example.com/example/img1.jpg',
    width: 4,
    height: 3
  },
  {
    src: 'http://example.com/example/img2.jpg',
    width: 1,
    height: 1
  }
];

<Gallery photos={photos} />;

Gallery properties

Property Type Default Description
photos array undefined required; array of objects
columns number or function undefined optional; number of photos per row or a function which receives the container width and should return the desired number of photos per row; defaults to Gallery's breakpoint choosing
onClick function undefined optional; do something when the user clicks a photo; receives arguments event and an object containing the index, photo obj originally sent and the next and previous photos in the gallery if they exist
margin number 2 optional; number of margin pixels around each entire image
direction string 'row' optional; column or row based layout
ImageComponent function default component optional; use a different image component than the default provided to display your photo

Photos array item properties (passed into Gallery's photos property)

Property Type Default Description
src string undefined required; the img src attribute value of the image
srcSet array or string undefined optional; srcSet attribute of the image
sizes array or string undefined optional; sizes attribute of the image
width number undefined required; original width of the gallery image (only used for calculating aspect ratio)
height number undefined required; original height of the gallery image (only used for calculating aspect ratio)
alt string undefined optional; alt text of the gallery image
key string src optional; key to be used on component

ImageComponent props

If you're passing a function component to ImageComponent you will receive back these props:

Property Type Value
margin string optional; margin prop optionally passed into Gallery by user
index number required; the index of the photo within the Gallery
photo object required; the individual object passed into Gallery's photos array prop, with all the same props except recalculated height and width
direction string optional; direction passed into Gallery
top number required if direction is 'column'; top position of this image, only passed if direction prop was 'column'
left number required if direction is 'column'; left position of this image, only passed if direction prop was 'column'
onClick function optional; the onClick function optionally passsed into Gallery by user

Github Repository