@paryajafari/react-zoom-pan-pinch
TypeScript icon, indicating that this package has built-in type declarations

2.1.4 • Public • Published

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 @paryajafari/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

Package Sidebar

Install

npm i @paryajafari/react-zoom-pan-pinch

Weekly Downloads

13

Version

2.1.4

License

MIT

Unpacked Size

1.39 MB

Total Files

116

Last publish

Collaborators

  • paryajafari