Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-element-pan

Package Overview
Dependencies
2
Maintainers
1
Versions
10
Issues
File Explorer

Advanced tools

react-element-pan

React component for allowing panning of DOM-elements too large for their container, in a Google Maps-like way.

    2.0.0latest

Version published
Maintainers
1
Yearly downloads
9,976
decreased by-40.73%

Weekly downloads

Readme

Source

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

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc