Have ideas to improve npm?Join in the discussion! »

    react-simple-image-viewer

    0.0.8 • Public • Published

    React Simple Image Viewer

    npm version Build Status Dependency Status

    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

    Install

    npm i react-simple-image-viewer

    DownloadsWeekly Downloads

    1,212

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    19.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar