react-zoom-pan-pinch

React Zoom Pan Pinch

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 another BetterTyped project — the whole preview below is a single link to GitHub.

---

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

or

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

Help me keep working on this project

• Become a Sponsor on GitHub

Our sponsors

Commercial Support

If you're using this library in production, I offer paid support:

• Priority issue resolution
• Help with debugging production issues
• Direct contact with the maintainer

Plans start at $400/month.

Contact: maciekpyrc@gmail.com

License

MIT prc5