Skip to content

kurpachsv/react-gallery

Repository files navigation

npm version Build Status Coverage Status Maintainability Dependency Status npm bundle size (minified) npm bundle size (minified + gzip)

react-gallery

A simple, fast and flexible image gallery.

Preview

Preview

Preview masonry

See storybook for live demonstration.

Basic Usage

npm i --save @kurpachsv/react-gallery
import {Gallery} from '@kurpachsv/react-gallery';
class App extends Component {
    
    render() {
        return (
            <Gallery
                images={
                    // your images array
                }
            />
        );
    }
}

For image must be specify width, height and src attributes.

Properties

Property Type Default Description
images array undefined required; array of images
columnsMaxCount number 5 optional; max value of columns count
columnMaxHeight number 200 optional; max column height in px (for prevent pictures degradation, if last row is not filled)
gutterInPercent number 0.5 optional; value in % of space between images
imageRenderer function default implementation optional; component/function for render of image
enableMasonry bool false optional; turn on/off masonry layout mode
disableObserver bool false optional; turn on/off lazy loading and intersection observer for images
disableActualImage bool false optional; show/hide actual images, but not the placeholders
className string '' optional; container class name
columnClassName string '' optional; item class name
rowClassName string '' optional; row class name (for default layout)
enableFixed bool false optional; turn on/off fixed layout mode
fixedBottom number 50 optional; size in px of bottom margin
enableDetailView bool false optional; turn on/off detail view mode for fixed or masonry layout
detailsViewRenderer function default implementation optional; component/function for render of detail view

Renderers

For better flexibility, you can override default image renderer or details renderer, here is a default implementation this renderers.

License

MIT license

Copyright (c) Sergei Kurpach, 2019