react-gallery

A simple, fast and flexible image gallery.

Preview

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

Copyright (c) Sergei Kurpach, 2019