@tiendeo/react-zoom-pan-pinch

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 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>Some text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

or

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>
    );
  }
}

Props of TransformWrapper

Props	Default	Type
isCentered	true	Boolean
limitToBounds	true	Boolean
limitToWrapperBounds	false	Boolean
disabled	false	Boolean
transformEnabled	true	Boolean
positionX	0	Number
positionY	0	Number
maxPositionX	null	Number or null
minPositionX	null	Number or null
maxPositionY	null	Number or null
minPositionY	null	Number or null
zoomingEnabled	true	Boolean
scale	1	Number
maxScale	8	Number or null
minScale	1	Number or null
scaleAnimationPadding	0.15	Number
enableWheel	true	Boolean
enableTouchPadPinch	true	Boolean
wheelStep	4	Number
limitToWrapperOnWheel	false	Boolean
pinchEnabled	true	Boolean
pinchSensitivity	1	Number
panningEnabled	true	Boolean
lockAxisX	false	Boolean
lockAxisY	false	Boolean
enableVelocity	true	Boolean
velocityTimeBasedOnMove	true	Boolean
minVelocity	1.6	Number
minVelocityScale	1	Number
velocityAnimationSpeed	1800	Number
velocitySensitivity	1	Number
dbClickMode	"zoomIn"	String
dbClickStep	40	Number
zoomInStep	40	Number
zoomOutStep	40	Number
zoomInAnimationSpeed	200	Number
zoomOutAnimationSpeed	200	Number
dbClickAnimationSpeed	200	Number
resetAnimationSpeed	200	Number
paddingAnimationSpeed	200	Number
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

Values returned from TransformWrapper component

Value	Description	Type
minVelocity	Minimum mouse velocity which will be animated after panning is done	Number
minVelocityScale	Velocity will be disabled if value is equal or lower than given value	Number
velocityTimeBasedOnMove	Velocity duration is based on the mouse move - the longer the movement, the longer the animation lasts	Boolean
limitToWrapperBounds	Enables panning when zoom is lower than 1, and limit it to the wrapper bounds	Boolean
limitToWrapperOnWheel	Zoomed object is always inside wrapper if limitBounds is activated	Boolean
limitToBounds	Limit zooming and panning to wrapper boundaries	Boolean
setScale(scale)	Sets scale	Number
setPositionX(positionX)	Sets position x	Number
setPositionY(positionY)	Sets position y	Number
zoomIn()	Zooming in function, used for controls button	---
zoomOut()	Zooming out function, used for controls button	---
setTransform(positionX, positionY, scale)	Sets transformations of content	Number or null
resetTransform()	Reset transformations to the initial values	Number
dbClickMode	Available modes: "zoomIn", "zoomOut", "reset"	String

License

MIT © prc5