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:
;; { 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> ; }
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
.
;; { //When an image is clicked, the Component's image prop will be printed (which is the source of the image) const onClickEventHandler = { console; } const images = "image1" "image2" "image3"; return <Photostream eventHandlers=onClick: onClickEventHandler imageList=images />;}
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.