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 |