Package Exports

react-image-viewer-zoom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-image-viewer-zoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.