use-pan-and-zoom
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 |