React Simple Image Viewer

![npm version](https://badge.fury.io/js/react-simple-image-viewer)
![Build Status](https://travis-ci.org/specter256/react-simple-image-viewer)

Simple image viewer component for React.

Installation

``shell $ npm install react-simple-image-viewer`or`shell $ yarn add react-simple-image-viewer`

`Example`

`jsx 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 (


      {images.map((src, index) => (
                  src={ src }
          onClick={ () => openImageViewer(index) }
          width="300"
          key={ index }
          style={{ margin: '2px' }}
          alt=""
        />
      ))}
      {isViewerOpen && (
                  src={ images }
          currentIndex={ currentImage }
          disableScroll={ false }
          closeOnClickOutside={ true }
          onClose={ closeImageViewer }
        />
      )}


  );
}

render(, document.getElementById('app'));`

`Demo`

Try out demo on CodeSandbox

`API`

Shortcuts

Example

jsx
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 (


      {images.map((src, index) => (
                  src={ src }
          onClick={ () => openImageViewer(index) }
          width="300"
          key={ index }
          style={{ margin: '2px' }}
          alt=""
        />
      ))}
      {isViewerOpen && (
                  src={ images }
          currentIndex={ currentImage }
          disableScroll={ false }
          closeOnClickOutside={ true }
          onClose={ closeImageViewer }
        />
      )}

);
}

render(, document.getElementById('app'));

API

| Property        |  Type     | Description                                                                       |
| :-------------- | :-------- | :-------------------------------------------------------------------------------- |
| src             | string[]  | Array of image URLs                                                               |
| currentIndex    | number    | Index of image in

Shortcuts