react-simple-image-viewer

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

Try out demo on CodeSandbox

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