@trihow/react-image-viewer
v0.0.5
Published
Image viewer next.js/react
Downloads
10
Readme
React Simple Image Viewer
Simple image viewer component for React.
Installation
$ npm install react-simple-image-viewer
or
$ yarn add react-simple-image-viewer
Example
import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import ImageViewer from 'react-simple-image-viewer';
function App() {
const [currentImage, setCurrentImage] = useState(0);
const [isViewerOpen, setIsViewerOpen] = useState(false);
const images = [
'http://placeimg.com/1200/800/nature',
'http://placeimg.com/800/1200/nature',
'http://placeimg.com/1920/1080/nature',
'http://placeimg.com/1500/500/nature',
];
const openImageViewer = useCallback((index) => {
setCurrentImage(index);
setIsViewerOpen(true);
}, []);
const closeImageViewer = () => {
setCurrentImage(0);
setIsViewerOpen(false);
};
return (
<div>
{images.map((src, index) => (
<img
src={ src }
onClick={ () => openImageViewer(index) }
width="300"
key={ index }
style={{ margin: '2px' }}
alt=""/>
))}
{isViewerOpen && (
<ImageViewer
src={ images }
currentIndex={ currentImage }
onClose={ closeImageViewer }
/>
)}
</div>
);
}
render(<App />, document.getElementById('app'));
Demo
API
| Property | Type | Description |
| :-------------- | :-------- | :-------------------------------------------------------------------------------- |
| src | string[] | Array of image URLs |
| currentIndex | number | Index of image in src
property which will be shown first when viewer is opened |
| onClose | function | Callback which will be called when viewer will closed |
| backgroundStyle | object | Custom styles for background of modal window |
Shortcuts
| Shortcut | Description | | :-------------- | :------------------------------ | | Escape | Close the viewer | | Right Arrow / l | Next image | | Left Arrow / h | Previous image | | Mouse wheel | Scrolling previous / next image |