react-gallery-viewer v0.0.8

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 currentlyDesktop 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>
    );
  }
}

## Example

`npm run demo:watch` and then go to `http://localhost:5000/`