BetterTyped/react-zoom-pan-pinch

BetterTyped/react-zoom-pan-pinch has 1,959 GitHub stars and 301 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-07 00:53 UTC. Last push 2026-10-30.

How these counts are measured

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>

1,959 stars 301 forks

What you can do

🚀 Fast and easy to use
🏭 Light, without external dependencies
💎 Mobile gestures, touchpad gestures and desktop mouse events support
🎁 Powerful context usage, which gives you a lot of freedom

Measured star growth

in 24h: 0
in 7 days: Collecting history
in 15 days: Collecting history
in 1 month: Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

Super fast and light react npm package for zooming, panning and pinching html elements in easy way

🏢 Using this library in production?

If your application depends on react-zoom-pan-pinch, I offer paid support to help you resolve issues quickly and avoid blocking releases.

Sources

Demo
Docs

Key Features

🚀 Fast and easy to use
🏭 Light, without external dependencies
💎 Mobile gestures, touchpad gestures and desktop mouse events support
🎁 Powerful context usage, which gives you a lot of freedom
🔧 Highly customizable
👑 Animations and Utils to create own tools
🔮 Advanced hooks and components

Try other BetterTyped projects

Do you like this library? Here is what else I build and maintain.

Installation

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

Examples

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>
  );
};