Use-pan-and-zoom NPM

use-pan-and-zoom

👆+🔎 React hook for panning and zooming a container.

Supports touch devices since version 0.4.0.

Installation

yarn add use-pan-and-zoom / npm install use-pan-and-zoom --save

Requirements

This package is a React Hook and therefor requires React 16.8 or newer.

Quick Start

import usePanZoom from "use-pan-and-zoom";

export default function Demo() {
  const { transform, setContainer, panZoomHandlers } = usePanZoom();

  return (
    <div
      ref={(el) => setContainer(el)}
      style={{ touchAction: "none" }}
      {...panZoomHandlers}
    >
      <div style={{ transform }}>
        <p>Drag to 👆 and scroll / pinch to 🔎 me!</p>
      </div>
    </div>
  );
}

Parameters

All parameters are optional

Parameter	Type	Default
`enablePan`	`boolean`	`true`
`enableZoom`	`boolean`	`true`
`requireCtrlToZoom`	`boolean`	`false`
`disableWheel`	`boolean`	`false`
`panOnDrag`	`boolean`	`true`
`preventClickOnPan`	`boolean`	`true`
`zoomSensitivity`	`number`	`0.01`
`minZoom`	`number`	`0`
`maxZoom`	`number`	`Infinity`
`minX`	`number`	`-Infinity`
`maxX`	`number`	`Infinity`
`minY`	`number`	`-Infinity`
`maxY`	`number`	`Infinity`
`initialZoom`	`number`	`1`
`initialPan`	`position`	`{ x: 0, y: 0 }`
`onPanStart`	`(touches: position[], transform: transform) => void`	`() => {}`
`onPan`	`(touches: position[], transform: transform) => void`	`() => {}`
`onPanEnd`	`() => void`	`() => {}`
`onZoom`	`(transform: transform) => void`	`() => {}`

Where:

position = { x: number, y: number }
transform = { x: number, y: number, zoom: number }

Output

Field	Type	Description
`container`	`HTMLElement \\| null`	Current container element
`setContainer`	`(HTMLElement \\| null) => void`	Sets the container element
`transform`	`string`	CSS string determining the transform
`center`	`position`	Center of container element
`pan`	`position`	Current pixels panned
`zoom`	`number`	Current zoom
`setPan`	`(pan: position) => void`	Set pan imperatively
`setZoom`	`(zoom: number) => void`	Set zoom imperatively
`panZoomHandlers`	`{ ...EventHandler }`	Pass to container element to listen to relevant events