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

• Demo
• Docs

Features

• :rocket: Fast and easy to use
• :factory: Light, without external dependencies
• :gem: Mobile gestures, touchpad gestures and desktop mouse events support
• :gift: Powerful context usage, which gives you a lot of freedom
• :wrench: Highly customizable
• :crown: Animations and Utils to create own tools

Install

npm install --save react-zoom-pan-pinch

or

yarn add react-zoom-pan-pinch

Usage

import React, { Component } from "react";

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

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

or

import React, { Component } from "react";

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

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        initialScale={1}
        initialPositionX={200}
        initialPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={() => zoomIn()}>+</button>
              <button onClick={() => zoomOut()}>-</button>
              <button onClick={() => resetTransform()}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

or

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

const Component = ()=> {
const transformComponentRef = useRef<ReactZoomPanPinchRef>(null!)

const zoomToImage = ()=>{
  const { zoomToElement } = transformComponentRef.current
  zoomToElement('imgExample')
}

const Control = ({zoomIn, zoomOut, resetTransform}:any)=>(
  <>
    <button onClick={() => zoomIn()}>+</button>
    <button onClick={() => zoomOut()}>-</button>
    <button onClick={() => resetTransform()}>x</button>
  </>
)

    return (
      <TransformWrapper
        initialScale={1}
        initialPositionX={200}
        initialPositionY={100}
        ref={transformComponentRef}
      >
        {(utils) => (
          <>
            <Control {...utils}/>
            <TransformComponent>
              <img src="image.jpg" alt="test" id="imgExample" />
              <div onClick={zoomToImage}>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
}

License

MIT © prc5