react-gallery-viewer
v0.0.8
Published
A high performant gallery viewer
Downloads
31
Maintainers
Readme
React Gallery Viewer for mobile device
Introduction
A google like image viewer, which is highly performant. With fullscreen images and data and lots of images the DOM gets heavy and results in janks across low end devices, this package aims to solve that issue for mobile currently[Desktop maybe in future releases].
Demo Link(Will only work for mobile)
https://www.urbanclap.com/weddings
Install
npm install --save react-gallery-viewer
npm run demo:watch
Open http://localhost:5000/
Usage
class BasicExample extends Component {
constructor(props) {
super(props);
this.state = {};
}
showGallery = (index) => {
this.setState({
boolShowGallery: true,
index
})
}
closeGallery = () => {
this.setState({
boolShowGallery: false
});
}
render() {
const styles = require('../css/example.css');
const imageArr = [
'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQQaEde-HaYe-7YPwfkqKX_fIoDCv3tq6DYrLPCaiGh9rtZUATq33l2dJ2KPg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtY0KKx3WeMtqsJPvwHrmh_IXQ5Adez1MJSc9TcVJGyP46tpN33gOwjYDb4g',
'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQQaEde-HaYe-7YPwfkqKX_fIoDCv3tq6DYrLPCaiGh9rtZUATq33l2dJ2KPg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtY0KKx3WeMtqsJPvwHrmh_IXQ5Adez1MJSc9TcVJGyP46tpN33gOwjYDb4g',
'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQQaEde-HaYe-7YPwfkqKX_fIoDCv3tq6DYrLPCaiGh9rtZUATq33l2dJ2KPg'
];
return (
<div>
<div className={styles.thumbnailContainer}>
{
imageArr.map((image, index) =>
<div
key={`thumb-${index}`}
className={styles.thumbnail}
onClick={this.showGallery.bind(this, index)}>
<img src={image} />
</div>
)
}
</div>
{
this.state.boolShowGallery &&
<div className={styles.containerClass}>
<GalleryViewer
closeIcon="http://image.ibb.co/djY7t6/close_icon.png"
currentSlide={this.state.index}
closeImageGallery={this.closeGallery}
onCurrentIndexChange={this.onCurrentIndexChange}>
{
imageArr.map((image, index) =>
<div
className={styles.imageContainer}
key={`gallery-${index}`}>
<img src={image} />
<div className={styles.info}>
Image no {index}
</div>
</div>
)
}
</GalleryViewer>
</div>
}
</div>
);
}
}
| Name | Type | Default | Description |
| ------------ | ------- | ------- | ----------- |
| slidesInDOM | Number | 3
| Number of slides to be kept in DOM |
| onCurrentIndexChange | Function | | Callback to be called after currentSlide changes |
| currentSlide | Number | `0` | Current Slide |
| boolDisableScroll | Boolean | `false` | To Disable scroll of the gallery |
| closeImageGallery | Function |
| Callback to be called after the gallery closes |
| containerClass | String | | Class name to be applied on the container of gallery |
| closeIcon | Boolean |
| Close icon image source to be used in gallery |
## Example
`npm run demo:watch` and then go to `http://localhost:5000/`