react-zoom-pan-pinch

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

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 | | wheelEnabled | 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):

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