react-zoom-pan-pinch

What is react-zoom-pan-pinch?

The react-zoom-pan-pinch package is a React library that provides functionalities for zooming, panning, and pinching elements within a React application. It is particularly useful for creating interactive and responsive user interfaces where users need to manipulate the view of an element, such as images, maps, or any other content that benefits from zoom and pan capabilities.

What are react-zoom-pan-pinch's main functionalities?

Zoom

This feature allows users to zoom in and out of an element. The code sample demonstrates how to wrap an image with TransformWrapper and TransformComponent to enable zoom functionality.

import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

function ZoomExample() {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="path/to/image.jpg" alt="Zoomable" />
      </TransformComponent>
    </TransformWrapper>
  );
}

Pan

This feature allows users to pan around an element. The code sample shows how to enable panning on a div element by wrapping it with TransformWrapper and TransformComponent.

import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

function PanExample() {
  return (
    <TransformWrapper>
      <TransformComponent>
        <div style={{ width: '500px', height: '500px', background: 'lightgray' }}>
          <p>Pan around this area</p>
        </div>
      </TransformComponent>
    </TransformWrapper>
  );
}

Pinch

This feature allows users to pinch to zoom in and out on touch devices. The code sample demonstrates how to enable pinch functionality on an image by setting the pinch property in TransformWrapper.

import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

function PinchExample() {
  return (
    <TransformWrapper pinch={{ disabled: false }}>
      <TransformComponent>
        <img src="path/to/image.jpg" alt="Pinchable" />
      </TransformComponent>
    </TransformWrapper>
  );
}

Other packages similar to react-zoom-pan-pinch

react-pan-and-zoom-hoc

react-pan-and-zoom-hoc is a higher-order component that provides pan and zoom functionalities to any React component. It is similar to react-zoom-pan-pinch but focuses more on providing a higher-order component approach rather than a wrapper component.

react-svg-pan-zoom

react-svg-pan-zoom is a React component specifically designed for SVG elements, providing pan and zoom functionalities. It is more specialized compared to react-zoom-pan-pinch, which can be used with any HTML element.

react-easy-panzoom

react-easy-panzoom is a simple and lightweight library for adding pan and zoom functionalities to React components. It offers a straightforward API and is easy to integrate, similar to react-zoom-pan-pinch, but with a focus on simplicity.

README

react-zoom-pan-pinch

Super fast and light react npm package for zooming, panning and pinching html elements in easy way

DEMO

DEMO

Install

npm install --save react-zoom-pan-pinch

or

yarn add react-zoom-pan-pinch

Props of TransformWrapper

Props	Default	Type
sensitivity	0.4	Number
zoomInStep	3	Number
zoomOutStep	2	Number
dbClickStep	5	Number
pinchSensitivity	0.6	Number
positionX	0	Number
positionY	0	Number
scale	1	Number
maxScale	8	Number or null
minScale	0.5	Number or null
wheelAnimationSpeed	0	Number
zoomAnimationSpeed	200	Number
pinchAnimationSpeed	0	Number
panAnimationSpeed	0	Number
resetAnimationSpeed	0	Number
maxPositionX	null	Number or null
minPositionX	null	Number or null
maxPositionY	null	Number or null
minPositionY	null	Number or null
limitToBounds	true	Boolean
disabled	false	Boolean
zoomingEnabled	true	Boolean
panningEnabled	true	Boolean
pinchEnabled	true	Boolean
dbClickEnabled	true	Boolean
transformEnabled	true	Boolean
enableZoomedOutPanning	false	Boolean
lastPositionZoomEnabled	false	Boolean
enableZoomThrottling	false	Boolean
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

Values returned from TransformWrapper component

Value	Description	Type
sensitivity	Wheel zoom sensitivity	Number
zoomInStep	handleZoomIn function zoom sensitivity	Number
zoomOutStep	handleZoomOut function zoom sensitivity	Number
dbClickStep	Double click zoom sensitivity	Number
pinchSensitivity	Pinching zoom sensitivity	Number
positionX	Pixel value of x position	Number
positionY	Pixel value of y position	Number
scale	Scale value	Number
maxScale	Max scale value	Number
minScale	Min scale value	Number
wheelAnimationSpeed	Animation speed of wheel zooming	Number
zoomAnimationSpeed	Animation speed of control buttons zooming	Number
pinchAnimationSpeed	Animation speed of pinch zooming	Number
panAnimationSpeed	Animation speed of panning	Number
resetAnimationSpeed	Animation speed of panning	Number
maxPositionX	Max position x	Number or null
minPositionX	Min position x	Number or null
maxPositionY	Max position y	Number or null
minPositionY	Min position y	Number or null
limitToBounds	Limit zooming and panning to wrapper boundaries	Boolean
disabled	Disables all functionality	Boolean
zoomingEnabled	Enables zooming	Boolean
panningEnabled	Enables panning	Boolean
pinchEnabled	Enables pinching	Boolean
dbClickEnabled	Enables double click	Boolean
transformEnabled	Enables component transformation in x and y axis	Boolean
enableZoomedOutPanning	Enables panning when zoom is lower than 1	Boolean
lastPositionZoomEnabled	Enables zoom buttons to scale in/out to the last wheel mouse event position	Boolean
previousScale	Previous scale value	Number
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(animationTime)	Reset transformations to the initial values	Number

Usage

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper scale={1} positionX={200} positionY={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>
    );
  }
}

or

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>
    );
  }
}

License

MIT © prc5