react-photo-container

Check out my first npm module : 
#reactjs #FrontEnd #responsive #npm

  • React Responsive Photo Container
  • The component uses React Images for Lightbox functionality.
  • A responsive React photo container component.
  • pictures , images , photos , responsive , container , photo , react-component , react
  • Defines number of photos per line for different screen sizes

A responsive React photo container component

@ane_naiz: Check out my first npm module :
#reactjs #FrontEnd #responsive #npm

To build the examples locally, run:

in a browser.

photos array undefined Required. Array of objects (photos)

handlePhotoClick func undefined Optional. Defines handler for photo click, if undefined Lightbox is displayed by default

custom object {mobile: 2, desktop: 3} Optional. Defines number of photos per line for different screen sizes

lightboxShowImageCount boolean false Optional. Displays at the bottom of the photo index of total images. Eg. “5 of 20”

backdropClosesModal boolean true Optional. Clicking on backdrop closes the modal

src string undefined Required. The src value of the container image

width number undefined Required. Width of the container image

height number undefined Required. Height of the container image

aspectRatio number undefined Required. Aspect ratio of the container image (width / height)

lightboxImage object undefined Required by default. If handlePhotoClick is undefined, Optional. See below for prop details.

src string undefined Required. Image used for the lightbox

srcset array undefined Optional. Array of srcsets for the lightbox

caption string undefined Optional. Caption for the lightbox image

This component uses React Images for Lightbox functionality. I’ve incorporated what I think to be useful Lightbox properties in context of a container into this component.

react-photo-container