0.2.41 • Published 5 years ago

@kurpachsv/react-gallery v0.2.41

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

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

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

PropertyTypeDefaultDescription
imagesarrayundefinedrequired; array of images
columnsMaxCountnumber5optional; max value of columns count
columnMaxHeightnumber200optional; max column height in px (for prevent pictures degradation, if last row is not filled)
gutterInPercentnumber0.5optional; value in % of space between images
imageRendererfunctiondefault implementationoptional; component/function for render of image
enableMasonryboolfalseoptional; turn on/off masonry layout mode
disableObserverboolfalseoptional; turn on/off lazy loading and intersection observer for images
disableActualImageboolfalseoptional; show/hide actual images, but not the placeholders
classNamestring''optional; container class name
columnClassNamestring''optional; item class name
rowClassNamestring''optional; row class name (for default layout)
enableFixedboolfalseoptional; turn on/off fixed layout mode
fixedBottomnumber50optional; size in px of bottom margin
enableDetailViewboolfalseoptional; turn on/off detail view mode for fixed or masonry layout
detailsViewRendererfunctiondefault implementationoptional; 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

0.2.41

5 years ago

0.2.40

6 years ago

0.2.39

6 years ago

0.2.38

6 years ago

0.2.37

6 years ago

0.2.36

6 years ago

0.2.35

6 years ago

0.2.34

6 years ago

0.2.33

6 years ago

0.2.32

6 years ago

0.2.31

6 years ago

0.2.30

6 years ago

0.2.29

6 years ago

0.2.28

6 years ago

0.2.27

6 years ago

0.2.26

6 years ago

0.2.25

6 years ago

0.2.24

6 years ago

0.2.23

6 years ago

0.2.22

6 years ago

0.2.21

6 years ago

0.2.20

6 years ago

0.2.19

6 years ago

0.2.18

6 years ago

0.2.17

6 years ago

0.2.16

6 years ago

0.2.15

6 years ago

0.2.14

6 years ago

0.2.13

6 years ago

0.2.12

6 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago