Skip to content
Generic html wrapper for pan and zoom feature for react canvas like components
TypeScript JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Adds linting fixes across code Apr 30, 2019
dev Adds linting fixes across code Apr 30, 2019
images Initial commit. :D May 19, 2018
integration_tests Adds corresponding integration test for reset value Apr 30, 2019
src Adds linting fixes across code Apr 30, 2019
.gitignore Adds gitignore to ignore cypress folder on install + adds cypress.jso… Jun 10, 2018
.npmignore Adds initial version of README May 19, 2018
LICENSE Adds initial version of README May 19, 2018
README.md Updates README with demo May 19, 2018
cypress.json Adds gitignore to ignore cypress folder on install + adds cypress.jso… Jun 10, 2018
package.json Bumps version in package json Dec 23, 2019
tsconfig.json
tslint.json Updates + adds prettier integration with tslint Apr 30, 2019
webpack.config.js Updates + adds prettier integration with tslint Apr 30, 2019
webpack.config.lib.js
yarn.lock Updates + adds prettier integration with tslint Apr 30, 2019

README.md

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).

You can’t perform that action at this time.