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

| Prop | Type | Usage | |-------------|-------------|------------------------| | images | Array | An array with the images to display | | index | Number | The position in the array of the image to show first | | handleClose | Function | A function to handle the clicking of the close icon | | containerClass | String | An optional css class to use on the overlay container | | hideArrows | Boolean | Hides the navigation arrows | | inverted | Boolean | Changes the overlay colour to white and the arrows and close icon to black | | clear | Boolean | Sets the opacity of the overlay to 0 | | opacity | Number | Used to set a custom opacity for the overlay (default is 0.8) | | imageClass | String | An optional css class to apply styles to the image which is displaying | | imageStyles | Object | Used to apply inline styles to the image | | arrowStyles | Object | Used to apply styles to the navigation arrows | | closeStyles | Object | Used to apply styles to the close icon (can be used to change the position of the icon) | | disableKeyboardNav | Boolean | Disable navigating the images using the keyboard |