Need help with react-resizable-rotatable-draggable?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mockingbot
206 Stars 69 Forks MIT License 28 Commits 29 Opened issues

Description

A rectangle react component which can be resized and rotated

Services available

!
?

Need anything else?

Contributors list

React-resizable-rotatable-draggable-rectangle

NPM JavaScript Style Guide

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

Installation

npm install --save react-resizable-rotatable-draggable

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'

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.