react-zoom-pan-pinch is an MIT-licensed TypeScript React library that adds zoom, pan and pinch interaction to ordinary HTML elements such as images, divs and SVG, and it is meant for React developers who want that behaviour without writing gesture handling themselves.

What it is

react-zoom-pan-pinch is a React component library published on npm, written in TypeScript and released under the MIT licence by its maintainer prc5. It provides a small set of components and hooks — chiefly TransformWrapper, TransformComponent and the useControls hook — that apply pan, zoom and pinch transforms to whatever HTML sits inside them, whether that is an img element, a div or SVG content. It is deliberately light and carries no external dependencies.

The problem it solves is the gesture and transform plumbing that otherwise has to be written by hand for any pannable, zoomable surface in a React application. Instead of attaching wheel, touch and pointer listeners, tracking scale and translation in state, and reconciling all of that with React's render cycle, a developer wraps content in TransformWrapper and TransformComponent and gets mobile gestures, touchpad gestures and desktop mouse events handled consistently. It also replaces the ad hoc control toolbars teams usually build around such surfaces: useControls returns zoomIn, zoomOut and resetTransform, which can be wired to any button.

Key capabilities

• Wraps arbitrary HTML content — img elements, divs and SVG — in TransformWrapper and TransformComponent to make it zoomable, pannable and pinchable.
• Exposes a useControls hook returning zoomIn, zoomOut and resetTransform for custom buttons and toolbars.
• Handles mobile gestures, touchpad gestures and desktop mouse events.
• Provides animations and utility helpers for building custom tools on top of the transform state.
• Offers advanced hooks and components beyond the basic wrapper, with context access to transform state further down the tree.
• Ships free of external dependencies, is written in TypeScript, and includes a Storybook site with runnable stories plus props documentation.

Who uses it and how

• React applications that display large images or diagrams and need users to inspect detail, starting from the "Basic Image" story in the demo.
• Interfaces that mirror the canvas navigation of design and whiteboard tools: the topic list associates the library with Figma and Miro, alongside SVG rendering.
• Production teams that want a support channel: the README offers paid commercial support with priority issue resolution, debugging help and direct contact with the maintainer, with plans starting at $400/month.
• Projects needing bespoke controls rather than defaults, using context and hooks to connect their own UI to the transform.
• Cross-device products where one implementation must cover phone touch, touchpad and desktop mouse input.

Getting started

Install with npm install --save react-zoom-pan-pinch or yarn add react-zoom-pan-pinch, then import TransformWrapper and TransformComponent and wrap the content to be made interactive. A demo and full documentation are hosted on the project's Storybook site.

How it compares

The facts provided do not list paid products that this library replaces. The topic list places it in the same interaction territory as canvas-style tools such as Figma and Miro, whose pinch-and-pan navigation it reproduces for ordinary web content, but no directly comparable library is named, so within this registry it stands alone.

When to use it — and when not to

There is nothing to operate beyond the dependency itself: no database, storage, server or mail service is involved, because the library runs entirely in the browser inside a React application, so the ongoing cost is keeping the package current and, optionally, paying for commercial support. Teams not building on React, or needing a full diagram editor with node creation, editing and persistence, should look elsewhere, since this handles movement and scale rather than document authoring. The honest limitation is documentation depth: the README excerpt is brief, the detail lives on the external Storybook site, and the project is maintained by a single author whose production support is a paid arrangement.

</a>

</a>

npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch

</a>

</a>

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const Example = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="image.jpg" alt="test" />
      </TransformComponent>
    </TransformWrapper>
  );
};

import {
  TransformWrapper,
  TransformComponent,
  useControls,
} from "react-zoom-pan-pinch";

const Controls = () => {
  const { zoomIn, zoomOut, resetTransform } = useControls();

  return (
    <div className="tools">
      <button type="button" onClick={() => zoomIn()}>
        +
      </button>
      <button type="button" onClick={() => zoomOut()}>
        -
      </button>
      <button type="button" onClick={() => resetTransform()}>
        x
      </button>
    </div>
  );
};

const Example = () => {
  return (
    <TransformWrapper
      initialScale={1}
      initialPositionX={200}
      initialPositionY={100}
    >
      <Controls />
      <TransformComponent>
        <img src="image.jpg" alt="test" />
        <div>Example text</div>
      </TransformComponent>
    </TransformWrapper>
  );
};

</a>

</a>