react-resizable-rotatable-draggable-touch-v2

 

A react widget that can be dragged, resized and rotated via a handler.

This is a fork of react-resizable-rotatable-draggable-touch which is a fork of react-resizable-rotatable-draggable, with a few improvements and extra props.

$3

``bash
npm install --save react-resizable-rotatable-draggable-touch-v2
``

Then you will need to install peer dependency

`bash
npm install --save styled-components
`

$3

`jsx
import React, { Component } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable-touch-v2'

class App extends Component {
constructor() {
super()
this.state = {
width: 100,
height: 100,
top: 100,
left: 100,
rotateAngle: 0
}
}

handleResize = ({ style: { top, left, width, height }, isShiftKey, type, event }) => {
console.log('resize', top, left, width, height, event)
this.setState({
top: Math.round(top),
left: Math.round(left),
width: Math.round(width),
height: Math.round(height)
})
}

handleRotate = ({ rotateAngle, event }) => {
console.log('rotate', rotateAngle, event)
this.setState({ rotateAngle })
}

handleDrag = ({ deltaX, deltaY, event }) => {
console.log('drag', deltaX, deltaY, event)
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
``

$3

| 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 | | |
|onClick | func | | |
|onDoubleClick| func | | |
|className | string | '' | |
|color | string | #333 | |

License

MIT © MockingBot
rinose
Vlad-x