react-zoom-pan-pinch

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

Features

• 🚀 Lightning fast and easy to use
• 🏭 Super light, fully made by me
• 💎 Mobile gestures, touchpad gestures and desktop mouse events support
• 🎁 Powerful context usage, which gives you a lot of freedom
• 🔧 Highly customizable
• 👑 Lots of animations and cool stuff

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
limitToBounds	true	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	0.5	Number or null
previousScale	1	Number
enableWheel	true	Boolean
enableTouchPadPinch	true	Boolean
wheelStep	4	Number
pinchEnabled	true	Boolean
pinchSensitivity	1	Number
panningEnabled	true	Boolean
enableZoomedOutPanning	false	Boolean
lockAxisX	false	Boolean
lockAxisY	false	Boolean
enableVelocity	true	Boolean
velocityBasedOnSpeed	true	Boolean
minVelocity	1.6	Number
minVelocityScale	1	Number
velocityAnimationSpeed	1600	Number
dbClickMode	"zoomIn"	String
dbClickStep	40	Number
zoomInStep	40	Number
zoomOutStep	40	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

Values returned from TransformWrapper component

Value	Description	Type
minVelocity	Minimum 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
velocityBasedOnSpeed	Velocity duration is based on it's value - bigger velocity, longer it lasts	Boolean
enableZoomedOutPanning	Enables panning when zoom is lower than 1	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(animationTime)	Reset transformations to the initial values	Number

License

MIT © prc5