1.6.1 • Published 2 years ago

@tamara027/react-zoom-pan-pinch v1.6.1

Weekly downloads
85
License
MIT
Repository
github
Last release
2 years ago

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

This package is created from https://www.npmjs.com/package/react-zoom-pan-pinch

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

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

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
contentClassstring
wrapperClassstring

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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