@trihow/react-image-viewer

0.0.5 • 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

Readme

Keywords

none

Package Sidebar

Install

npm i @trihow/react-image-viewer

Weekly Downloads

0

Version

0.0.5

License

MIT

Unpacked Size

33.2 kB

Total Files

14

Last publish

Collaborators

  • lukasknk