1.0.4 • Published 6 years ago
react-waterfall-gallery v1.0.4
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 |
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.1-development
6 years ago
0.0.0-development
6 years ago