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