Socket
Socket
Sign inDemoInstall

react-simple-image-viewer

Package Overview
Dependencies
5
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-simple-image-viewer

Simple image viewer component for React


Version published
Maintainers
1
Weekly downloads
12,134
increased by8.29%

Weekly downloads

Readme

Source

React Simple Image Viewer

npm version Build 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 }
          disableScroll={ false }
          closeOnClickOutside={ true }
          onClose={ closeImageViewer }
        />
      )}
    </div>
  );
}

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

Demo

Try out demo on CodeSandbox

API

PropertyTypeDescription
srcstring[]Array of image URLs
currentIndexnumberIndex of image in src property which will be shown first when viewer is opened
onClosefunctionCallback which will be called when viewer will closed
backgroundStyleobjectCustom styles for background of modal window
disableScrollbooleanDisable scrolling images by mouse wheel
closeOnClickOutsidebooleanWhether viewer should be closed when clicking outside of image
closeComponentJSX.ElementCustom component for the close button
leftArrowComponentJSX.ElementCustom component for the left arrow
rightArrowComponentJSX.ElementCustom component for the right arrow

Shortcuts

ShortcutDescription
EscapeClose the viewer
Right Arrow / lNext image
Left Arrow / hPrevious image
Mouse wheelScrolling previous / next image

Keywords

FAQs

Last updated on 06 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc