react-image-viewer-zoom

react-image-viewer-zoom

A scalebale image viewer for React.

View the online demo.

Installation

$ npm install --save react-image-viewer-zoom

Usage

import ImageViewer from 'react-image-viewer-zoom'
import 'react-image-viewer-zoom/dist/style.css' 

class MyComponent extends React.Component<any, any> {
	render() {
		 const images: any = [
            { src: 'https://unsplash.it/800/300?image=1', title: 'title', content: 'content' },
            { src: 'https://unsplash.it/300/800?image=2', title: 'title', content: 'content' },
            { src: 'https://unsplash.it/1800/300?image=3', title: 'title', content: 'content' },
            { src: 'https://unsplash.it/800/1800?image=4', title: 'title', content: 'content' }
        ];
                
        return (
			<ImageViewer
            	showPreview={true}
           		showIndex={true}
               	prefixCls="mycomponent"
             	activeIndex={0}
             	images={images}/>
        )
	}
}

Implement in a modal

class MyModal extends React.Component<any, any> {
    constructor(props: any) {
        this.state = {
            activeIndex: undefined,
            visible: false
        }
    }
    // init active index when open the modal
    open(activeIndex? number) {
        this.setState({
            activeIndex: activeIndex || 0,
            visible: true
        });
    }

    render() {
        const { activeIndex } = this.state;
        
        return this.state.visible ? (
            <div className='my-modal'>
                <ImageViewer
                    showPreview
                    showIndex
                    activeIndex={activeIndex}
                    images={images}/>
            </div>
        ) : null;
    }
}

API

Prop	Type	Required	Default	Details
images	array	yes		The set for the image
showIndex	boolean	no	true	Show the index of the current image on toolbar
showPreview	boolean	no	true	Show bottom Indicators image preview
activeIndex	number	no	0	Specify the active image when init the image viewer
prefixCls	string	no	null
className	string	no	null

Each image item options props

Prop	Type	Required	Details
src	string	Yes	The source of the image
title	string	No	Image title
content	string	No	Image caption

Typescript config

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true
    }
}

Set allowSyntheticDefaultImports to prevent error TS1192: Module 'react' has no default export.