# react-element-pan

**Repository Path**: mirrors_svenanders/react-element-pan

## Basic Information

- **Project Name**: react-element-pan
- **Description**: React component for allowing panning of DOM-elements too large for their container, in a "Google Maps" kind of way
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-18
- **Last Updated**: 2026-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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](http://rexxars.github.io/react-element-pan/) for some demos.

## Installation
`react-element-pan` can be installed using [npm](https://npmjs.org/):

```
npm install react-element-pan
```

## Basic usage

```javascript
var React = require('react');
var ElementPan = require('react-element-pan');

// Want to use touch events?
React.initializeTouchEvents(true);

// Render the component
React.renderComponent(
    new ElementPan({
        onPanStart: function() { /* Pan started! */ },
        onPanStop: function() { /* Pan ended! */ },
        onPan: function() { /* Pan move! */ },

        startX: 771, // Optional X coordinate to start at
        startY: 360  // Optional Y coordinate to start at
    }, React.DOM.img({ src: 'some-large-image.jpg' })
), document.body);

// Or, with JSX:
React.renderComponent(
    <ElementPan>
        <img src="some-large-image.jpg" />
    </ElementPan>
);
```

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