Miss any of our Open RFC calls?Watch the recordings here! »

@tiendeo/react-zoom-pan-pinch

3.3.1 • Public • Published

react-zoom-pan-pinch

NPM npm bundle size JavaScript Style Guide Package Quality NPM npm GitHub stars

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

Install

npm i @tiendeo/react-zoom-pan-pinch

DownloadsWeekly Downloads

1

Version

3.3.1

License

MIT

Unpacked Size

321 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar