@orgo-systems/orgo-zoom-pan-pinch
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.1 • Public • Published

    react-zoom-pan-pinch

    NPM npm bundle size JavaScript Style Guide 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>Example 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
    scalePadding {...} 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
    limitToWrapper false 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
    limitsOnWheel 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
    velocity false boolean
    velocityEqualToMove false boolean
    velocitySensitivity 1 number
    velocityMinSpeed 1.2 number
    velocityBaseTime 1800 number
    velocityAnimationType easeOut string
    padding true boolean
    paddingSize 40 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 70 number
    animation true boolean
    animationTime 200 number
    animationType easeOut string

    zoomOut prop elements

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

    doubleClick prop elements

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

    Double click modes

    Value
    zoomIn
    zoomOut
    reset

    Values returned from TransformWrapper component

    Value Description Type
    setScale(scale, animationTime, animationType) Sets scale Number
    setPositionX(positionX, animationTime, animationType) Sets position x Number
    setPositionY(positionY, animationTime, animationType) Sets position y Number
    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 content Number or null
    resetTransform() Reset transformations to the initial values Number

    License

    MIT © prc5

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Maciej Pyrc

    👀 💻 🚇 🚧 💡 💬

    Shaneeza

    🐛

    gabrielfmp

    💻

    Pablo Vega Uceta

    💻

    Selvam M

    💻

    David Liu

    💻

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

    Install

    npm i @orgo-systems/orgo-zoom-pan-pinch

    DownloadsWeekly Downloads

    1

    Version

    1.6.1

    License

    MIT

    Unpacked Size

    431 kB

    Total Files

    25

    Last publish

    Collaborators

    • ashcl0ud