Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gerhardsletten/react-pinch-zoom-pan
A react component that lets you add pinch-zoom and pan sub components
https://github.com/gerhardsletten/react-pinch-zoom-pan
Last synced: 7 days ago
JSON representation
A react component that lets you add pinch-zoom and pan sub components
- Host: GitHub
- URL: https://github.com/gerhardsletten/react-pinch-zoom-pan
- Owner: gerhardsletten
- License: apache-2.0
- Created: 2016-01-17T17:36:07.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T12:26:20.000Z (about 1 year ago)
- Last Synced: 2024-10-17T03:19:25.254Z (21 days ago)
- Language: JavaScript
- Homepage: http://gerhardsletten.github.io/react-pinch-zoom-pan/
- Size: 3.34 MB
- Stars: 66
- Watchers: 5
- Forks: 26
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-pinch-zoom-pan
A react component that lets you add pinch-zoom and pan sub components. On touch you can pinch-zoom and pan the zoomed image. On desktop you can 'pinch' by holding down your *ALT-key* and do a mousedown from center of inner content onto the edges.
[See demo](http://gerhardsletten.github.io/react-pinch-zoom-pan/)
[](https://github.com/feross/standard)
## Install
`npm install react-pinch-zoom-pan`
## Usage
Take a look at demo/App.js for usage, you can also run it in your local enviroment by
`npm install & npm start`
and open [localhost:3001](http://localhost:3001)
```
import React, {Component} from 'react'
import {PinchView} from 'react-pinch-zoom-pan'
class App extends Component {
render () {
return (
)
}
}
```
### Usage underlaying zoom widget (ReactPinchZoomPan)
Take a look at demo/App.js for usage, you can also run it in your local enviroment by
`npm install & npm start`
and open [localhost:3001](http://localhost:3001)
```
import React, {Component} from 'react'
import s from 'react-prefixr'
import {ReactPinchZoomPan} from 'react-pinch-zoom-pan'
export default class App extends Component {
/* Use the css padding-top to make the container as high as inner content */
getContainerStyle(ratio) {
return {
paddingTop: ratio.toFixed(2) + '%',
overflow: 'hidden',
position: 'relative'
}
}
/* Position inner content absolute */
getInnerStyle() {
return {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
}
render() {
const {height,width} = this.props
const ratio = (height / width) * 100
return (
{
return (
)
}} />
)
}
}
```
### Usage event listeners
The component exposes 2 event listeners: `onPinchStart` and `onPinchStop`. These are called resp. when the user starts pinching and stops pinching.
```
console.log('pinch started')} onPinchStop={() => console.log('pinch stopped')}>
```
### Usage initial scale
The component exposes a prop to set the `initialScale`. This can be used to display the content with zoomed in by default
```
```
## Discussion
* My experience with rxjs is limited, see `src/ReactPinchZoomPan.js` if you have any suggestions and submit a pull request.
Thanks to [Hugo Bessaa](https://github.com/hugobessaa) and [rx-react-pinch](https://github.com/hugobessaa/rx-react-pinch) for inital idea, but it had no support for panning and desktop.