use-pan-zoom
React hook for panning & zooming element
Install
npm i -S use-pan-zoom
Usage
;; const App = { const elemRef style = ; return <div ref=elemRef style= touchAction: 'none' transformOrigin: '0 0' transform: `translate3d(px, px, 0) scale()` /> ;};
API
const values = ;
values: (Object)
- elemRef: (Function) a React Callback Ref https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
- style: (Object)
- x: (Number) x position
- y: (Number) y position
- scale: (Number) scale ratio
- setStyle: (Function) style setter
options: (Object)
- minScale: (Number) minimum scale, default
-Infinity
- maxScale: (Number) maximum scale, default
Infinity
- bounds: (Object: {x?: [Number, Number], y?: [Number, Number]} | Function: ({ scale }) => Object) element position bounds, default:
{ x: [-Infinity, Infinity], y: [-Infinity, Infinity] }
- onPanStart: (Function(event)) pan start callback
- onPan: (Function(event)) panning callback
- onPanEnd: (Function(event)) pan end callback
- onZoomStart: (Function(event)) zoom start callback
- onZoom: (Function(event)) zooming callback
- onZoomEnd: (Function(event)) zoom end callback
FAQ
- multiple refs integration
const App = { const myRef = ; const elemRef = ; return <div ref= { myRefcurrent = node; ; } /> ;};
Caveats
calculat bounds based on the current scale
If bounds are calculated based on the current scale, use scale
from parameters instead of style.scale
, because style
is a React State, the value could be staled until the next effect
e.g. limit pan zoom inside parentElement
;