@ajainarayanan/react-pan-zoom

Simple wrapper for pan and zoom on html containers

Stats

StarsIssuesVersionUpdatedCreatedSize
@ajainarayanan/react-pan-zoom
34210.0.42 years ago3 years agoMinified + gzip package size for @ajainarayanan/react-pan-zoom in KB

Readme

React Pan & Zoom

A simple pan and zoom for canvas like elements in react.

Demo

Edit q8wl1joow9

Installation

> yarn add @ajainarayanan/react-pan-zoom

Usage

import ReactPanZoom from "@ajainarayanan/react-pan-zoom";
class MyComponent extends React.PureComponent {

  public render() {
    return (
      <ReactPanZoom>
        <img src="some/src/for/image.png" />
      </ReactPanZoom>
    );
  }
}

Props

  • zoom : Provide zoom level for the cavnas'ish element. 1 by default
  • dx : Provide the initial x co-ordinate to pan the underlying element to be. 0 by default
  • dy : Provide the initial y co-ordinate to pan the underlying element to be. 0 by default

For more information on what dx and dy mean please refer here (tx == dx and ty == dy).

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.