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.