react-resizable-rotatable-draggable

by mockingbot

A rectangle react component which can be resized and rotated

144 Stars 55 Forks Last release: Not found MIT License 25 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.