react-gallery-viewer

0.0.8 • Public • Published

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/`


Dependents (0)

Package Sidebar

Install

npm i react-gallery-viewer

Weekly Downloads

3

Version

0.0.8

License

ISC

Last publish

Collaborators

  • fyre91