react-zoom-zoom

A lightweight, customizable React component for zooming and panning any content.

🎬 Live Demo

✨ Features

• Figma like interface
  • Touchpad: scroll to pan & pinch to zoom
  • Mouse: scroll to pan & Cmd/Ctrl + Click + Drag to pan
• Fully controlled

📦 Install

npm install react-zoom-zoom

🚀 Usage

import { ZoomPanContainer, ZoomPanContainerHandle } from "react-zoom-zoom";

const zoomRef = useRef<ZoomPanContainerHandle>(null);

function zoomIn() {
  zoomRef.current?.zoomIn();
}

function zoomOut() {
  zoomRef.current?.zoomOut();
}

function zoomOut() {
  zoomRef.current?.resetZoom();
}

function zoomToElement(elementRef: MutableRefObject<HTMLDivElement | null>) {
  zoomRef.current?.zoomToElement(elementRef);
}

const [scale, setScale] = useState(1);

<ZoomPanContainer ref={zoomRef} onScaleChange={setScale}>
  {/* content */}
</ZoomPanContainer>;

Props

| Prop Name | Type | Default | Description | |----------------|-------------------------------|------------|--------------------------------------------------------------------------| | children | ReactNode | — | The content inside the container. | | minScale | number | 0.5 | Minimum allowed zoom scale. | | maxScale | number | 4 | Maximum allowed zoom scale. | | scaleStep | number | 0.5 | Amount by which zooming in/out increments. | | initialScale | number | 1 | Initial zoom scale when the component mounts. | | zoomSpeed | number | 0.01 | Speed factor for smooth zooming (useful for wheel zoom, etc.). | | onScaleChange| (scale: number) => void | — | Callback triggered whenever the zoom scale changes. | | outerStyles | React.CSSProperties | {} | Optional styles for the outer (viewport) container. | | innerStyles | React.CSSProperties | {} | Optional styles for the inner (zoomable/pannable) content container. |

Ref Methods (ZoomPanContainerHandle)

| Method | Type | Description | |-------------------|-----------------------------------------------|--------------------------------------------------------------------| | zoomIn | () => void | Programmatically zooms in by scaleStep. | | zoomOut | () => void | Programmatically zooms out by scaleStep. | | resetZoom | () => void | Resets the zoom scale to the initialScale. | | zoomToElement | (element: HTMLElement, targetScale?: number) => void | Zooms into a specific element, optionally setting a target scale. |