How to add image zoom and pan pinch functionality to React

Have you ever wondered how some developers add zoom and pan pinch functionality to there Projects then this article is for you. In this article we will gonna learn how to add image zoom and pan pinch functionality to React.

react-zoom-pan-pinch

This library is one of the best library to add zoom and pan pinch functionality. It is super fast and at the same time very light weight 8KB only. It not uses any external dependency.

The biggest thing is that it supports mobile gestures, touchpad gestures and desktop mouse events. It is also easy to modify according to your needs.

Installation

Similar to any other package we can install it using npm or yarn.

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

Usage

It’s usage is very simple. We just need to import two things TransformWrapper and TransformComponent. TransformWrapper is for wrapping the image and TransformComponent for wrapping whole elements because its provides functions like zoom in/out and reset. Like below example:

<TransformWrapper>
        <TransformComponent>
          <img src="image.jpg" alt="test" />
        </TransformComponent>
      </TransformWrapper>

Your component will gonna look like this.

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

You will get output similar to this with zoom IN/OUT functionality.

Edit wwi84

Official Demo

I hope you have learned how to add image zoom and pan pinch functionality to React.

Best svg resources for React Projects

Categories: Reactjs

1 Comment

How to store encrypted password in backend - Blog React · July 2, 2020 at 3:13 am

[…] How to add image zoom and pan pinch functionality to React […]

Comments are closed.