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
var React = require('react');
var ElementPan = require('react-element-pan');
React.initializeTouchEvents(true);
React.render(
new ElementPan({
onPanStart: function() { },
onPanStop: function() { },
onPan: function() { },
width: 800,
height: 800,
startX: 771,
startY: 360
}, React.DOM.img({ src: 'some-large-image.jpg' })
), document.body);
React.render(
<ElementPan>
<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.
License
Licensed under the MIT License, see LICENSE