react-waterfall-gallery

Preview

Installation

npm install --save react-waterfall-gallery

or

yarn add react-waterfall-gallery

Example

import React from 'react'
import Gallery from 'react-waterfall-gallery'

const images = [
  'http://lorempixel.com/1200/800/',
  'http://lorempixel.com/1200/800/',
  'http://lorempixel.com/1200/800/',
  'http://lorempixel.com/1200/800/',
  'http://lorempixel.com/1200/800/',
]

class MyComponent extends React.Component {
  render () {
    return (
      <Gallery
        images={images}
      />
    )
  }
}

Props

Prop	Type	Default	Description
images	Array	[]	(Required) Array of image sources
numColumns	number	4	(Optional) Number of grid columns
rowHeight	string	150px	(Optional) Height of each row/thumbnail
gutterSize	string	15px	(Optional) Size of grid gutter (space between thumbnails)
defaultOpacity	number	0.65	(Optional) Opacity of thumbnail (hovering over thumbnail causes full opacity)
iconColor	string	#000000	(Optional) Color of default loading spinner
icon	Component	null	(Optional) Component to display instead of default loading spinner
direction	string	bottom	(Optional) Direction of waterfall entrances; Valid parameters include: bottom, top, left, right, none (the 'none' option means images simply appear in place with a fade transition)
step	number	200	(Optional) Time (in milliseconds) between each image's entrance in waterfall animation