use-zoom-pan
🔍React hook for zoom and pan
Features
Install
yarn add use-zoom-pan# or npm i use-zoom-pan --save
Demo
You can try to play by yourself starting with this CodeSandbox snippet: https://codesandbox.io/s/use-zoom-pan-x0vf2
Changelog
https://github.com/kwdowik/use-zoom-pan/blob/master/CHANGELOG.md
Zoom
;; { const ref = ; const zoom = ; const handleZoom = { if !eventctrlKey return; event; ; }; return <div> <h1>Title</h1> <div ref=ref onWheel=handleZoom> Zoom </div> </div> ;}
Pan
;; { const ref = ; const panBy = ; const handlePan = { if !eventshiftKey return; event; ; }; return <div onMouseMove=handlePan> <h1>Title</h1> <div ref=ref> Pan </div> </div> ;}
Options
You can provide additional options useZoomPan
:
Option | Default | Description |
---|---|---|
minScale | .1 | Minimum value for the zoom out |
maxScale | 30 | Maximum value for the zoom in |
scaleSensitivity | 50 | The zoom sensitivity |