https://github.com/guiqui/react-zoom-pan
https://github.com/guiqui/react-zoom-pan
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/guiqui/react-zoom-pan
- Owner: guiqui
- License: mit
- Created: 2020-08-13T07:35:14.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T14:08:10.000Z (almost 2 years ago)
- Last Synced: 2025-03-12T10:43:14.690Z (7 months ago)
- Language: TypeScript
- Size: 27.1 MB
- Stars: 12
- Watchers: 3
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-zoom-pan
[](http://npm.im/react-zoom-pan)
[](http://opensource.org/licenses/MIT)
[](https://travis-ci.org/guiqui/react-zoom-pan)
[](https://codecov.io/gh/guiqui/react-zoom-pan)
[](https://www.codacy.com/app/gquiman/react-zoom-pan?utm_source=github.com&utm_medium=referral&utm_content=guiqui/react-zoom-pan&utm_campaign=Badge_Grade)
[](https://www.npmjs.com/package/react-zoom-pan)
A react component that enables you to add pan,zoom,resize and rotation functionality to your application
## K8Studio.io is our Golden Sponsor
[](https://www.k8studio.io)
## About
React-zoom-pan is a container component that has zoom and pan functionality as well as adding resize,move,and rotation capabilities to any child element .
[](https://www.buymeacoffee.com/gquiman)
The component is capable of:
- Can handle thousands of elements .
- Pan Viewport
- Move elements
- Resize elements.
- Rotate elements.
- Zoom.
- Wheel zoom.
- Fully customisable elements.
## demo
To play with a live [demo](https://guiqui.github.io/react-zoom-pan/index.html) .
## Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-zoom-pan/)]
## Installation
```javascript
npm install react-zoom-pan
```
## Getting started
Using this component is really easy,
Import the ZoomPan component,add the ZoomPan to your render method and add whatever other component inside the ZoomPan container.
And that's all. Now all the components inside the container can be move,resize and rotate, you also can use your mouse wheel to zoom and pan.
```javascript
import React, { Component } from 'react';
import ZoomPan from 'react-zoom-pan';
import './App.css';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
container 1
container 2
);
}
}
```
## Element Configuration
To set the dimensions like (x,y) positions or (width,height) on the children documents you can set the following properties:
| name | Descriptions |
| ---- | -----------------------------------------------: |
| y | The y coordinate of the top point of the element |
| w | The width of the element |
| h | The height of the element |
## Events
| Property | params | Descriptions |
| ------------ | :----: | --------------------------------------------------------------: |
| onSelectItem | string | triggered when an element is selected |
| onChange | string | triggered when an element change |
| onAddItem | string | triggered when an element is added |
## Other Free Apps we have created:
- [Profile Me](https://profile.softcloud.pro/) - Creates Professional Profile pictures.
- [Background RM](https://rmbackground.softcloud.pro/) - Remove pictures Background.
- [MetersApp](https://app.meters.app/login) - Create Quotes using measures from floorplan.