@kurpachsv/react-gallery

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