use-pan-zoom

React hook for panning & zooming element

Install

npm i -S use-pan-zoom

Usage

import React from 'react';
import usePanZoom from 'use-pan-zoom';
const App = () => {
  const { elemRef, style } = usePanZoom();
  return (
    <div
      ref={elemRef}
      style={{
        touchAction: 'none',
        transformOrigin: '0 0',
        transform: `translate3d(${style.x}px, ${style.y}px, 0) scale(${style.scale})`
      }}
    ></div>
  );
};

API

const values = usePanZoom(options);

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 = useRef();
  const { elemRef } = usePanZoom();
  return (
    <div
      ref={node => {
        myRef.current = node;
        elemRef(node);
      }}
    />
  );
};

Caveats

calculate 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

usePanZoom({
  bounds: ({ scale }) => {
    return {
      x: [parent.width - element.width * scale, 0],
      y: [parent.height - element.height * scale, 0]
    };
  }
});