react-zoom-pan-pinch

Super fast and light react npm package for zooming, panning and pinching html elements in easy way

Features

• 🚀 Fast and easy to use
• 🏭 Light, without external dependencies
• 💎 Mobile gestures, touchpad gestures and desktop mouse events support
• 🎁 Powerful context usage, which gives you a lot of freedom
• 🔧 Highly customizable
• 👑 Animations and many options

DEMO

DEMO EXAMPLE

Install

npm install --save react-zoom-pan-pinch

or

yarn add react-zoom-pan-pinch

Usage

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper>
        <TransformComponent>
          <img src="image.jpg" alt="test" />
        </TransformComponent>
      </TransformWrapper>
    );
  }
}

or

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        defaultScale={1}
        defaultPositionX={200}
        defaultPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={zoomIn}>+</button>
              <button onClick={zoomOut}>-</button>
              <button onClick={resetTransform}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

Props of TransformWrapper

Props	Default	Type
scale	1	number
positionX	auto	number
positionY	auto	number
defaultPositionX	null	number
defaultPositionY	null	number
defaultScale	null	number
options	{...}	object
wheel	{...}	object
pan	{...}	object
pinch	{...}	object
zoomIn	{...}	object
zoomOut	{...}	object
doubleClick	{...}	object
reset	{...}	object
scalePadding	{...}	object
onWheelStart	null	Function
onWheel	null	Function
onWheelStop	null	Function
onPanningStart	null	Function
onPanning	null	Function
onPanningStop	null	Function
onPinchingStart	null	Function
onPinching	null	Function
onPinchingStop	null	Function
onZoomChange	null	Function
enablePadding	true	Boolean
enablePanPadding	true	Boolean

Options prop elements

Props	Default	Type
disabled	false	boolean
transformEnabled	true	boolean
minPositionX	null	null, number
maxPositionX	null	null, number
minPositionY	null	null, number
maxPositionY	null	null, number
minScale	1	number
maxScale	8	number
limitToBounds	true	boolean
limitToWrapper	false	boolean
centerContent	true	boolean

scalePadding prop elements

Props	Default	Type
disabled	false	boolean
size	0.45	number
animationTime	200	number
animationType	easeOut	string

Wheel prop elements

Props	Default	Type
disabled	false	boolean
step	5	number
wheelEnabled	true	boolean
touchPadEnabled	true	boolean
limitsOnWheel	true	boolean

Pan prop elements

Props	Default	Type
disabled	false	boolean
disableOnTarget	[]	array of class names or node tags (div,span...)
lockAxisX	false	boolean
lockAxisY	false	boolean
velocity	false	boolean
velocityEqualToMove	false	boolean
velocitySensitivity	1	number
velocityMinSpeed	1.2	number
velocityBaseTime	1800	number
velocityAnimationType	easeOut	string
padding	true	boolean
paddingSize	40	number
animationTime	200	number
animationType	easeOut	string

Pinch prop elements

Props	Default	Type
disabled	false	boolean

zoomIn prop elements

Props	Default	Type
disabled	false	boolean
step	20	number
animation	true	boolean
animationTime	200	number
animationType	easeOut	string

zoomOut prop elements

Props	Default	Type
disabled	false	boolean
step	20	number
animation	true	boolean
animationTime	200	number
animationType	easeOut	string

doubleClick prop elements

Props	Default	Type
disabled	false	boolean
step	20	number
animation	true	boolean
animationTime	200	number
animationType	easeOut	string
mode	zoomIn	zoomIn / zoomOut / reset

reset prop elements

Props	Default	Type
disabled	false	boolean
animation	true	boolean
animationTime	200	number
animationType	easeOut	string

Animations types

Value
easeOut
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint

Double click modes

Value
zoomIn
zoomOut
reset

Values returned from TransformWrapper component

Value	Description	Type
setScale(scale, animationTime, animationType)	Sets scale	Number
setPositionX(positionX, animationTime, animationType)	Sets position x	Number
setPositionY(positionY, animationTime, animationType)	Sets position y	Number
zoomIn()	Zooming in function, used for controls button	---
zoomOut()	Zooming out function, used for controls button	---
setTransform(positionX, positionY, scale, animationTime, animationType)	Sets transformations of content	Number or null
resetTransform()	Reset transformations to the initial values	Number

License

MIT © prc5

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Maciej Pyrc 👀 💻 🚇 🚧 💡 💬

Shaneeza 🐛

gabrielfmp 💻

Pablo Vega Uceta 💻

Selvam M 💻

David Liu 💻

This project follows the all-contributors specification. Contributions of any kind welcome!