Responsive React Masonry Photo Gallery Component

Nov 24, 2018
Responsive React Masonry Photo Gallery Component

React Photo Gallery

Responsive React Masonry Photo Gallery Component.

View Documentation and Examples Download Source


To install:

yarn add 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 ```jsx import Gallery from 'react-photo-gallery'; export default class Sample extends React.Component { render() { return ( <Gallery photos={PHOTO_SET} /> ); } } const PHOTO_SET = [ { src: '', width: 4, height: 3 }, { src: '', width: 1, height: 1 } ];

Gallery properties

photosarrayundefinedrequired; array of objects
columnsnumberundefinedoptional; number of photos per row; defaults to Gallery's breakpoint choosing
onClickfunctionundefinedoptional; 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
marginnumber2optional; number of margin pixels around each entire image
directionstring'row'optional; column or row based layout
ImageComponentfunctiondefault componentoptional; use a different image component than the default provided to display your photo

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

srcstringundefinedrequired; the img src attribute value of the image
srcSetarray or stringundefinedoptional; srcSet attribute of the image
sizesarray or stringundefinedoptional; sizes attribute of the image
widthnumberundefinedrequired; original width of the gallery image (only used for calculating aspect ratio)
heightnumberundefinedrequired; original height of the gallery image (only used for calculating aspect ratio)
altstringundefinedoptional; alt text of the gallery image
keystringsrcoptional; key to be used on component

ImageComponent props

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

marginstringoptional; margin prop optionally passed into Gallery by user
indexnumberrequired; the index of the photo within the Gallery
photoobjectrequired; the individual object passed into Gallery's photos array prop, with all the same props except recalculated height and width
directionstringoptional; direction passed into Gallery
topnumberrequired if direction is 'column'; top position of this image, only passed if direction prop was 'column'
leftnumberrequired if direction is 'column'; left position of this image, only passed if direction prop was 'column'
onClickfunctionoptional; the onClick function optionally passsed into Gallery by user