react-resizable-rotatable-draggable-touch-v2 v2.0.2

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'

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 (
      <div className="App">
        <ResizableRect
          left={left}
          top={top}
          width={width}
          height={height}
          rotateAngle={rotateAngle}
          // aspectRatio={false}
          // minWidth={10}
          // minHeight={10}
          zoomable='n, w, s, e, nw, ne, se, sw'
          // rotatable={true}
          // onRotateStart={this.handleRotateStart}
          onRotate={this.handleRotate}
          // onRotateEnd={this.handleRotateEnd}
          // onResizeStart={this.handleResizeStart}
          onResize={this.handleResize}
          // onResizeEnd={this.handleUp}
          // onDragStart={this.handleDragStart}
          onDrag={this.handleDrag}
          // onDragEnd={this.handleDragEnd}
          color="#6963da"
        >Hello world</ResizableRect>
      </div>
    )
  }
}

export default App

Props

License

MIT © MockingBot rinose Vlad-x