React library to implement Zoom, Pan, Pinch on HTML Elements

React library to implement Zoom, Pan, Pinch on HTML Elements

React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div’s. It is a Super fast and light react npm package for Zooming, Panning and Pinching html elements in easy way.

Features

  • rocket Fast and easy to use
  • factory Light, without external dependencies
  • gem Mobile gestures, touchpad gestures and desktop mouse events support
  • gift Powerful context usage, which gives you a lot of freedom
  • wrench Highly customizable
  • crown Animations and many options

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

PropsDefaultType
scale1number
positionXautonumber
positionYautonumber
defaultPositionXnullnumber
defaultPositionYnullnumber
defaultScalenullnumber
options{…}object
wheel{…}object
pan{…}object
pinch{…}object
zoomIn{…}object
zoomOut{…}object
doubleClick{…}object
reset{…}object
scalePadding{…}object
onWheelStartnullFunction
onWheelnullFunction
onWheelStopnullFunction
onPanningStartnullFunction
onPanningnullFunction
onPanningStopnullFunction
onPinchingStartnullFunction
onPinchingnullFunction
onPinchingStopnullFunction
onZoomChangenullFunction
enablePaddingtrueBoolean
enablePanPaddingtrueBoolean

Options prop elements

PropsDefaultType
disabledfalseboolean
transformEnabledtrueboolean
minPositionXnullnull, number
maxPositionXnullnull, number
minPositionYnullnull, number
maxPositionYnullnull, number
minScale1number
maxScale8number
limitToBoundstrueboolean
limitToWrapperfalseboolean
centerContenttrueboolean

scalePadding prop elements

PropsDefaultType
disabledfalseboolean
size0.45number
animationTime200number
animationTypeeaseOutstring

Wheel prop elements

PropsDefaultType
disabledfalseboolean
step6.5number
wheelEnabledtrueboolean
touchPadEnabledtrueboolean
limitsOnWheeltrueboolean

Pan prop elements

PropsDefaultType
disabledfalseboolean
disableOnTarget[]array of class names or node tags (div,span…)
lockAxisXfalseboolean
lockAxisYfalseboolean
velocityfalseboolean
velocityEqualToMovefalseboolean
velocitySensitivity1number
velocityMinSpeed1.2number
velocityBaseTime1800number
velocityAnimationTypeeaseOutstring
paddingtrueboolean
paddingSize40number
animationTime200number
animationTypeeaseOutstring

Pinch prop elements

PropsDefaultType
disabledfalseboolean

zoomIn prop elements

PropsDefaultType
disabledfalseboolean
step70number
animationtrueboolean
animationTime200number
animationTypeeaseOutstring

zoomOut prop elements

PropsDefaultType
disabledfalseboolean
step70number
animationtrueboolean
animationTime200number
animationTypeeaseOutstring

doubleClick prop elements

PropsDefaultType
disabledfalseboolean
step70number
animationtrueboolean
animationTime200number
animationTypeeaseOutstring
modezoomInzoomIn / zoomOut / reset

reset prop elements

PropsDefaultType
disabledfalseboolean
animationtrueboolean
animationTime200number
animationTypeeaseOutstring

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

ValueDescriptionType
setScale(scale, animationTime, animationType)Sets scaleNumber
setPositionX(positionX, animationTime, animationType)Sets position xNumber
setPositionY(positionY, animationTime, animationType)Sets position yNumber
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 contentNumber or null
resetTransform()Reset transformations to the initial valuesNumber

License

MIT © prc5

That’s it. Feel free to leave a comment.