React component for allowing panning of DOM-elements too large for their container, in a "Google Maps" kind of way
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Merge branch 'master' of https://github.com/ambewas/react-element-pan Jul 20, 2018
lib Modernize Jul 20, 2018
src Add typings Jul 20, 2018
umd ESLint > JSHint Nov 14, 2015
.babelrc
.editorconfig
.eslintignore Fix linting Jul 20, 2018
.eslintrc Modernize Jul 20, 2018
.gitignore Modernize Jul 20, 2018
.npmignore Add npmignore Nov 14, 2015
.prettierrc Modernize Jul 20, 2018
.travis.yml Test on node 8 Jul 20, 2018
LICENSE Added license Aug 19, 2014
README.md Merge branch 'master' of https://github.com/ambewas/react-element-pan Jul 20, 2018
package.json
webpack.config.js Modernize Jul 20, 2018
yarn.lock Add typings Jul 20, 2018

README.md

react-element-pan

React component for allowing panning of DOM-elements too large for their container, in a Google Maps-like way. Supports touch devices and should work on IE8+.

Demos

See the demos page for some demos.

Installation

react-element-pan can be installed using npm:

npm install react-element-pan

Basic usage

const React = require('react')
const ReactDOM = require('react-dom')
const ElementPan = require('react-element-pan')

// Or, with JSX:
ReactDOM.render(
  <ElementPan
    width={800} // Optional width for the ElementPan container
    height={800} // Optional height for the ElementPan container
    startX={771} // Optional X coordinate to start at
    startY={360} // Optional Y coordinate to start at
    onPanStart={() => {
      /* Pan started! */
    }}
    onPanStop={() => {
      /* Pan ended! */
    }}
    onPan={() => {
      /* Pan move! */
    }}
  >
    <img src="some-large-image.jpg" />
  </ElementPan>,
  document.body
)

Note that startX/startY only works if the content is large enough when the component is mounted. You might want to set a min-width/min-height in your CSS for this to work.

Firefox

A quick note on the firefox browser. The default behavior on mouseDown in firefox on images is "drag to copy". If you wish to avoid the ghost image, prevent default on mousedown on your image:

ReactDOM.render(
  <ElementPan>
    <img src="some-large-image.jpg" onMouseDown={evt => evt.preventDefault()} />
  </ElementPan>,
  document.body
)

License

Licensed under the MIT License, see LICENSE