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

Where:

• position = { x: number, y: number }
• transform = { x: number, y: number, zoom: number }

Output