react-zoom-pan-pinch

What is react-zoom-pan-pinch?

The react-zoom-pan-pinch package is a React library that provides functionalities for zooming, panning, and pinching elements within a React application. It is particularly useful for creating interactive and responsive user interfaces where users need to manipulate the view of an element, such as images, maps, or any other content that benefits from zoom and pan capabilities.

What are react-zoom-pan-pinch's main functionalities?

Zoom

This feature allows users to zoom in and out of an element. The code sample demonstrates how to wrap an image with TransformWrapper and TransformComponent to enable zoom functionality.

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

function ZoomExample() {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="path/to/image.jpg" alt="Zoomable" />
      </TransformComponent>
    </TransformWrapper>
  );
}

Pan

This feature allows users to pan around an element. The code sample shows how to enable panning on a div element by wrapping it with TransformWrapper and TransformComponent.

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

function PanExample() {
  return (
    <TransformWrapper>
      <TransformComponent>
        <div style={{ width: '500px', height: '500px', background: 'lightgray' }}>
          <p>Pan around this area</p>
        </div>
      </TransformComponent>
    </TransformWrapper>
  );
}

Pinch

This feature allows users to pinch to zoom in and out on touch devices. The code sample demonstrates how to enable pinch functionality on an image by setting the pinch property in TransformWrapper.

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

function PinchExample() {
  return (
    <TransformWrapper pinch={{ disabled: false }}>
      <TransformComponent>
        <img src="path/to/image.jpg" alt="Pinchable" />
      </TransformComponent>
    </TransformWrapper>
  );
}

Other packages similar to react-zoom-pan-pinch

react-pan-and-zoom-hoc

react-pan-and-zoom-hoc is a higher-order component that provides pan and zoom functionalities to any React component. It is similar to react-zoom-pan-pinch but focuses more on providing a higher-order component approach rather than a wrapper component.

react-svg-pan-zoom

react-svg-pan-zoom is a React component specifically designed for SVG elements, providing pan and zoom functionalities. It is more specialized compared to react-zoom-pan-pinch, which can be used with any HTML element.

react-easy-panzoom

react-easy-panzoom is a simple and lightweight library for adding pan and zoom functionalities to React components. It offers a straightforward API and is easy to integrate, similar to react-zoom-pan-pinch, but with a focus on simplicity.

README

🖼 React Zoom Pan Pinch

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

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

⚡Hyper Fetch - Fetching and realtime data exchange framework.

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

License

MIT © prc5

Help me keep working on this project ❤️

• Become a Sponsor on GitHub

💖 Our sponsors