Skip to content

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

License

Notifications You must be signed in to change notification settings

BetterTyped/react-zoom-pan-pinch

Repository files navigation

๐Ÿ–ผ React Zoom Pan Pinch

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

Twitter Follow

Sources

Premium sponsor banner

Premium sponsor banner

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? Try out other projects

Hyper Fetch

โšกHyper Fetch - Fetching and realtime data exchange framework.


Installation

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

Premium sponsor banner

Premium sponsor banner

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 React, { Component } from "react";

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

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

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

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

Premium sponsor banner

Premium sponsor banner

License

MIT ยฉ prc5

Help me keep working on this project โค๏ธ

๐Ÿ’– Our sponsors

My Sponsors