simple-image-viewer v0.2.13

simple-image-viewer

An image viewer component for React.js projects

This is a simple component for viewing images in React Projects. This doesn't handle displaying the images as thumbnails, only displaying the full size images.

Updated with support for navigation using arrow keys and closing the viewer using the esc key.

0.2.0 Updated to allow navigation via swiping left and right on touch screen devices

Install

npm

npm install simple-image-viewer --save

yarn

yarn add simple-image-viewer

Usage

Begin by importing the component & css to your project

    // es6 imports
    import ImageViewer from 'simple-image-viewer'
    import 'simple-image-viewer/lib/styles.css'
    
    // CommonJS
    var ImageViewer = require('simple-image-viewer')
    require('simple-image-viewer/lib/styles.css')

The simplest usage is to pass an array of images to the ImageViewer along with the index of the image to display first and a function to handle closing the viewer

    <ImageViewer images=[image1.jpg, image2.jpg, image3.jpg] index="0" handleClose={this.closeFunction} />

You can also map over an array of images to display the thumbnails and use this array to load the image viewer

    renderImages(index) {
		<ImageViewer images={this.props.images} index={index} handleClose={this.closeFunction} />
	}
    
    this.props.images.map((i, index) => <img src={i} onClick={() => this.renderImages(index)} />)

There are also a number of other props as detailed below to control the look of the component

Props