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}/>
        )
    }
}
 

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;
    }
}
 
 
 

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