simple-image-viewer-react19 v1.4.0

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

Shortcuts

Forked from original repository

Github Repository