A simple, fast and flexible image gallery.
See storybook for live demonstration.
npm i --save @kurpachsv/react-galleryimport {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.
| 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 |
For better flexibility, you can override default image renderer or details renderer, here is a default implementation this renderers.
Copyright (c) Sergei Kurpach, 2019