react-photostream

PhotoStream is a neat little React component to display a list of images in a compact fashion in columns, without gaps inbetween regardless of image size.

You can see a small demo here http://react-photostream.surge.sh/

To install:

npm install --save react-photostream

To use:

import React, {Component} from 'react';
import Photostream from 'react-photostream';

class VacationPictures extends Component {
  
  render() {

    let listOfImages = [
      "http://lorempixel.com/400/450",
      //...many images...
      "http://lorempixel.com/400/400"
    ];

    let listOfImageObjects = [
      {image:"http://lorempixel.com/400/450", altText:"first one"},
      //...many images...
      {image:"http://lorempixel.com/400/400", altText:"nth one"}
    ];

    return (
      <div>
        <h2>Images from vacation</h2>
        <PhotoStream imageList={listOfImages} />
        <hr />
        <h2>Detailes images from vacation</h2>
        <PhotoStream imageList={listOfImageObjects} />
      </div>
    );
  }

}

export default VacationPictures

Instructions

To render a wall of photos, you just need to pass to <PhotoStream /> a list of image links as property imageList. You can pass either an array of image links, or an object of the format { image, altText }. The image is the image link, and the altText is the alternate text to show on the photo itself (as the alt attribute on <img />).

Using custom event handlers

To use custom event handlers, pass to Photostream a prop called eventHandlers, which must be an object with any of the following: onClick, onMouseEnter, onMouseLeave.

import React from 'react';
import Photostream from 'react-photostream';

function Example(props){

  //When an image is clicked, the Component's image prop will be printed (which is the source of the image)
  const onClickEventHandler = function(event, self){
    console.log(self.props.image);
  }
  
  const images = ["image1", "image2", "image3"];
  
  return <Photostream eventHandlers={{onClick: onClickEventHandler}} imageList={images} />;
}

export default Example

Note: if your event handler needs to use information from the image component (say, if you want to use props) then the event handler should receive two arguments, event and self, where self is the this object of each Photo component.