Easy Element Zoom Pan Pinch Library For React

Description:

An easy and fast React library for zooming, panning, and pinching HTML elements on the app.

Supports mobile gestures, touchpad gestures, and desktop mouse events.

Install & Import:

# Yarn
$ yarn add react-zoom-pan-pinch
# NPM
$ npm i react-zoom-pan-pinch --save

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

Basic Usage:

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

Preview: