@secretwpn/react-image-zoom

This is a fork of react-responsive-pinch-zoom-pan by Brad Stiff with slightly changed feature set and converted to TypeScript

It provides a React component rendering an img element with zoom and pan capability using CSS transforms.

Install

npm

npm install @secretwpn/react-image-zoom --save

yarn

yarn add @secretwpn/react-image-zoom

Local

1. git clone https://github.com/secretwpn/react-responsive-pinch-zoom-pan.git
2. cd react-responsive-pinch-zoom-pan
3. npm install
4. npm start
5. Browse to http://localhost:3001

Usage

import React from 'react'
import { PinchZoomPanImage } from '@secretwpn/react-image-zoom'

const App = () => {
  return (
    <div style={{ width: '500px', height: '500px' }}>
      <PinchZoomPanImage
        src="http://picsum.photos/750/750"
      />
    </div>
  )
}

API

Prop	Type	Default	Description
initialScale	number or auto	auto	The initial scale of the image. When auto, the image will be proportionally 'autofit' to the container.
minScale	number	auto	The minimum scale to which the image can be zoomed out. When auto, the minimum scale is the 'autofit' scale.
maxScale	number	1	The maximum scale to which the image can be zoomed in.
zoomRevision	number	undefined	Zoom level will be reset when this prop is changed
position	center or topLeft	topLeft	Position of the image relative to the container. Applies when the scaled image is smaller than the container.
doubleTapBehavior	reset or zoom	reset	Whether to zoom in or reset to initial scale on double-click / double-tap.
imageStyle	CSSProperties	{}	Style to apply to the image, e.g. { opacity: 0.5 }
containerStyle	CSSProperties	{}	Style to apply to the image container div, e.g. { width: '100% }
animate	boolean	false	Whether to enable subtle animation
alt	string	undefined	Same as alt in regular <img /> tag
src	string	undefined	Same as src in regular <img /> tag
onTransformed	({top, left, scale}, imageElement) => void	undefined	Called after applying image transformation
onImageDimensionsChanged	({width, height}) => void	undefined	Called when image dimensions are changed
onDoubleClick	() => void	undefined	Called on double click
onImageLoaded	() => void	undefined	Called when image is loaded

Development

You're welcome to contribute to react-responsive-pinch-zoom-pan.

To set up the project:

1. Fork and clone the repository
2. npm install
3. npm start

The example page will be available on http://localhost:3001 in watch mode, meaning you don't have to refresh the page to see your changes.