react-zoomable-image-updated

1.1.10 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i react-zoomable-image-updated

Weekly Downloads

0

Version

1.1.10

License

MIT

Unpacked Size

195 kB

Total Files

14

Last publish

Collaborators

  • akd3vs