React Zoomable Image

Zoomable image for mouse and touch devices. Built with React.

Demo

Installation

npm install --save react-zoomable-image

Example

import React, { Component } from 'react';
import ZoomableImage from 'react-zoomable-image';

class Zoom extends Component {
  render() {
    return (
      <ZoomableImage
        baseImage={{
          alt: 'An image',
          src: 'http://via.placeholder.com/350x550',
          width: 350,
          height: 550
        }}
        largeImage={{
          alt: 'A large image',
          src: 'http://via.placeholder.com/450x707',
          width: 450,
          height: 707
        }}
        thumbnailImage={{
          alt: 'A small image',
          src: 'http://via.placeholder.com/70x110'
        }}
      />
    );
  }
}

Props

imageType: {
  alt: string,
  src: string,
  width: number,
  height: number
}

thumbnailType: {
  alt: string,
  src: string
}

Property	Type	Description
baseImage	imageType	The initial image with no zoom applied. Rendered as an image element, with supplied width and height
largeImage	imageType	The zoomed image. Width and height, relative to baseImage's width and height, determine initial zoom level
thumbnailImage	thumbnailType	Small "map" image displayed in top left corner during zoom. Size determined by mapScaleFactor
displayMap	bool	Should a thumbnail map image be shown? Defaults to true
mapBorderColor	string	Color of border around the thumbnail map image
mapScaleFactor	number	Size of thumbnail map, relative to baseImage. Defaults to 0.2
zoomTransitionTime	number	Duration of zoom-in and zoom-out transitions. Defaults to 300

Tests

Tested with Jest. To run tests, clone the project, install dependencies, and npm run test