Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-zoom-zoom

chinmay-annadate14MIT1.0.3TypeScript support: included

A simple, customizable React zoom & pan container component

react, zoom, pan, zoom pan, zoom container, panning, zoomable, pinch zoom, react zoom, react pan, image zoom, canvas zoom, drag to pan, zoom and pan, zoom to element, pan and zoom, react zoom pan container, zoom component, react zoomable, touch gestures, wheel zoom, react pinch zoom, interactive zoom

readme

react-zoom-zoom

npm version license bundle size types

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.