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.
Installation
npm install --save react-resizable-rotatable-draggable-touch-v2`
Then you will need to install peer dependency
npm install --save styled-components
Usage
import React Component from 'react'import ResizableRect from 'react-resizable-rotatable-draggable-touch-v2' { thisstate = width: 100 height: 100 top: 100 left: 100 rotateAngle: 0 } { console this } { console this } { console this } { const width top left height rotateAngle = thisstate return <div ="App"> <ResizableRect = = = = = // = // = // = ='n, w, s, e, nw, ne, se, sw' // = // = = // = // = = // = // = = // = ="#6963da" >Hello world</ResizableRect> </div> }
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 | ||
onClick | func | ||
onDoubleClick | func | ||
className | string | '' | |
color | string | #333 |
License
MIT © MockingBot rinose Vlad-x