Skip to content

kurpachsv/react-gallery

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date
Nov 4, 2018
Oct 27, 2018
Nov 18, 2019
Mar 13, 2020
Mar 13, 2020
Aug 6, 2019
Jul 30, 2019
Oct 14, 2018
Mar 30, 2019
Oct 14, 2018
Oct 27, 2018
Apr 2, 2019
Jul 2, 2019
Mar 29, 2019
Jul 2, 2019
Oct 14, 2018
Jan 4, 2023
Jan 4, 2023
Apr 2, 2019
Nov 4, 2018
Nov 4, 2018
Jul 30, 2019

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