Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mockingbot/react-resizable-rotatable-draggable
A rectangle react component which can be resized and rotated
https://github.com/mockingbot/react-resizable-rotatable-draggable
Last synced: 1 day ago
JSON representation
A rectangle react component which can be resized and rotated
- Host: GitHub
- URL: https://github.com/mockingbot/react-resizable-rotatable-draggable
- Owner: mockingbot
- License: mit
- Created: 2018-05-02T05:59:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-21T08:10:21.000Z (4 months ago)
- Last Synced: 2024-12-14T16:40:41.606Z (13 days ago)
- Language: JavaScript
- Homepage: https://mockingbot.github.io/react-resizable-rotatable-draggable/
- Size: 1.42 MB
- Stars: 265
- Watchers: 9
- Forks: 92
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-resizable-rotatable-draggable-rectangle
[](https://www.npmjs.com/package/react-resizable-rotatable-draggable) [](https://standardjs.com)
A react widget that can be resized and rotated via a handler.
### Installation
```bash
npm install --save react-resizable-rotatable-draggable
```
Then you will need to install peer dependency
```bash
npm install --save styled-components
```
### Usage
```jsx
import React, { Component } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable'
class App extends Component {
constructor() {
super()
this.state = {
width: 100,
height: 100,
top: 100,
left: 100,
rotateAngle: 0
}
}
handleResize = (style, isShiftKey, type) => {
// type is a string and it shows which resize-handler you clicked
// e.g. if you clicked top-right handler, then type is 'tr'
let { top, left, width, height } = style
top = Math.round(top)
left = Math.round(left)
width = Math.round(width)
height = Math.round(height)
this.setState({
top,
left,
width,
height
})
}
handleRotate = (rotateAngle) => {
this.setState({
rotateAngle
})
}
handleDrag = (deltaX, deltaY) => {
this.setState({
left: this.state.left + deltaX,
top: this.state.top + deltaY
})
}
render() {
const {width, top, left, height, rotateAngle} = this.state
return (
)
}
}
export default App
```
### Props
| Props | Type | Default | Example |
|:-----------:|:-----------------------:|:-------:|:-------------------------------------:|
|left | number.isRequired | | 10 |
|top | number.isRequired | | 10 |
|width | number.isRequired | | 100 |
|height | number.isRequired | | 100 |
|rotateAngle | number | 0 | 0 |
|rotatable | bool | true | true |
|zoomable | string | '' | 'n, w, s, e, nw, ne, se, sw' |
|minWidth | number | 10 | 0 |
|minHeight | number | 10 | 0 |
|aspectRatio | number (width / height) | | 1(which makes the rectangle a square) |
|onRotateStart| func | | |
|onRotate | func | | (rotateAngle) |
|onRotateEnd | func | | |
|onResizeStart| func | | |
|onResize | func | | (style, isShiftKey, type) |
|onResizeEnd | func | | |
|onDragStart | func | | |
|onDrag | func | | (deltaX, deltaY) |
|onDragEnd | func | | |
## License
MIT © [MockingBot](https://github.com/mockingbot)