Skip to content
React library to support easy zoom, pan, pinch on various html dom elements like images and divs
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 55ad480 Nov 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Added CODEOWNERS file Sep 14, 2019
__tests__ Travis config, Typescript config with basic interfaces, basic tests Nov 9, 2019
example Velocity speed fixes - to match speed based on the wrapper size to wi… Nov 17, 2019
logo Added mobile pinch zoom and panning, updated readme, some minor bug f… Jul 18, 2019
src Velocity speed fixes - to match speed based on the wrapper size to wi… Nov 17, 2019
.all-contributorsrc docs: update .all-contributorsrc Nov 11, 2019
.editorconfig
.eslintignore Fixed tests Nov 10, 2019
.eslintrc Fixed tests Nov 10, 2019
.gitignore init create-react-library@2.6.7 Jul 11, 2019
.prettierrc Travis config, Typescript config with basic interfaces, basic tests Nov 9, 2019
.travis.yml Fixed tests Nov 10, 2019
LICENSE Initial commit Jul 14, 2019
README.md Velocity speed fixes - to match speed based on the wrapper size to wi… Nov 17, 2019
package.json v1.4.1 Nov 17, 2019
rollup.config.js Travis config, Typescript config with basic interfaces, basic tests Nov 9, 2019
tsconfig.json Fixes Nov 10, 2019
tsconfig.test.json Travis config, Typescript config with basic interfaces, basic tests Nov 9, 2019
yarn.lock Fixes Nov 10, 2019

README.md

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>
        <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>Some 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
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
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 6.5 number
wheelEnabled true boolean
touchPadEnabled true boolean
disableLimitsOnWheel 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
panPaddingShiftTime 50 number
velocity false boolean
velocityEqualToMove false boolean
velocitySensitivity 1 number
velocityMinSpeed 1.2 number
velocityBaseTime 1800 number
limitToWrapperBounds false boolean
padding true boolean
paddingSize 6 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 60 number
animation true boolean
animationTime 200 number
animationType easeOut string

zoomOut prop elements

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

doubleClick prop elements

Props Default Type
disabled false boolean
step 60 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

Values returned from TransformWrapper component

Value Description Type
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

Contributors

Thanks goes to these wonderful people (emoji key):

Maciej Pyrc
Maciej Pyrc

👀 💻 🚇 🚧 💡 💬
Shaneeza
Shaneeza

🐛
gabrielfmp
gabrielfmp

💻
Pablo Vega Uceta
Pablo Vega Uceta

💻
Selvam M
Selvam M

💻

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

You can’t perform that action at this time.