Simple Image Viewer

Simple image viewer component for React v19+

This is an in-place replacement fork of the original repository react-simple-image-viewer. Apart from support for React version 19, some additional fixed and features have been added.

Change Log

• v1.3.2 - Initial release with support for React 19, added closeOnClickInside property
• v1.3.3 - Added alts property to provide alt text for images
• v1.4.0 - Viewer shows captions under images based on alts string array (also added related disableCaption and captionStyle properties)

Installation

$ npm install simple-image-viewer-react19

or

$ yarn add simple-image-viewer-react19

Example

import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import ImageViewer from 'simple-image-viewer-react19';

function App() {
  const [currentImage, setCurrentImage] = useState(0);
  const [isViewerOpen, setIsViewerOpen] = useState(false);
  const images = [
    'https://picsum.photos/1200/800',
    'https://picsum.photos/800/1200',
    'https://picsum.photos/1920/1080',
    'https://picsum.photos/1500/500',
  ];
  const alts = [
    'Random image 1200 by 800',
    'Random image 800 by 1200',
    'Random image 1920 by 1080',
    'Random image 1500 by 500',
  ]

  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={ alts[index] }
        />
      ))}

      {isViewerOpen && (
        <ImageViewer
          src={ images }
          alt={ alts }
          currentIndex={ currentImage }
          disableScroll={ false }
          closeOnClickOutside={ true }
          closeOnClickInside={ true }
          onClose={ closeImageViewer }
        />
      )}
    </div>
  );
}

render(<App />, document.getElementById('app'));

API

Property	Type	Description
src	string[]	Array of image URLs
alt	string[]	Array of alt texts, used in image and show as caption under image
currentIndex	number	Index of image in src and alt property shown when viewer is open
onClose	function	Callback which will be called when viewer is closed
backgroundStyle	CSSProperties	Object with custom styles for background of modal window
captionStyle	CSSProperties	Object with custom styles for caption text under image
disableScroll	boolean	Disable scrolling images by mouse wheel
disableCaption	boolean	Do not show the caption under the image
closeOnClickOutside	boolean	Whether viewer should be closed when clicking outside of image
closeOnClickInside	boolean	Whether viewer should be closed when clicking inside image
closeComponent	JSX.Element	Custom component for the close button
leftArrowComponent	JSX.Element	Custom component for the left arrow
rightArrowComponent	JSX.Element	Custom component for the right arrow

Shortcuts

Shortcut	Description
Escape	Close the viewer
Right Arrow / l	Next image
Left Arrow / h	Previous image
Mouse wheel	Scrolling previous / next image

Forked from original repository

Github Repository