Skip to content

React library to support easy zoom, pan, pinch on various html dom elements like images and divs

License

Notifications You must be signed in to change notification settings

ahmadshaheer/react-zoom-pan-pinch

 
 

Repository files navigation

react-zoom-pan-pinch

NPM npm bundle size JavaScript Style Guide NPM npm GitHub stars

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

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

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

License

MIT © prc5

About

React library to support easy zoom, pan, pinch on various html dom elements like images and divs

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 92.9%
  • JavaScript 5.2%
  • CSS 1.7%
  • HTML 0.2%