Noiseless Party Machine

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

    Install

    npm i react-gallery-viewer

    DownloadsWeekly Downloads

    0

    Version

    0.0.8

    License

    ISC

    Last publish

    Collaborators

    • fyre91