React Photo Gallery

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

  • Stateless, responsive, accessible, and highly customizable image gallery component
  • Maintains the original aspect ratio of your photos
  • Uses actual image elements, optionally pass in srcSet and sizes attributes
  • 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/

To build some examples locally, run:

yarn install
yarn start

Then open localhost:8000 in a browser.

Use


import Gallery from 'react-photo-gallery';

export default class Sample extends React.Component {
    render() {
    return (
        <Gallery photos={PHOTO_SET} />
    );
    }
}
const PHOTO_SET = [
  {
    src: 'http://example.com/example/img1.jpg',
    width: 4,
    height: 3
  },
  {
    src: 'http://example.com/example/img2.jpg',
    width: 1,
    height: 1
  }
];
Property Type Default Description
photos array undefined required; array of objects
columns number 3 optional; number of photos per row
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
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 margin prop optionally passed into Gallery by user
index number the index of the photo within the Gallery
photo object the individual object passed into Gallery's photos array prop, with all the same props except recalculated height and width
onClick function the onClick function optionally passsed into Gallery by user

results matching ""

    No results matching ""