1.0.4 • Published 6 years ago

react-waterfall-gallery v1.0.4

Weekly downloads
7
License
MIT
Repository
github
Last release
6 years ago

react-waterfall-gallery

Status npm version Download Count semantic-release

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

PropTypeDefaultDescription
imagesArray[](Required) Array of image sources
numColumnsnumber4(Optional) Number of grid columns
rowHeightstring150px(Optional) Height of each row/thumbnail
gutterSizestring15px(Optional) Size of grid gutter (space between thumbnails)
defaultOpacitynumber0.65(Optional) Opacity of thumbnail (hovering over thumbnail causes full opacity)
iconColorstring#000000(Optional) Color of default loading spinner
iconComponentnull(Optional) Component to display instead of default loading spinner
directionstringbottom(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)
stepnumber200(Optional) Time (in milliseconds) between each image's entrance in waterfall animation