React-handle-dnd-resize

A react widget that can be resized and rotated via a handler. Based on the react-resizable-rotatable-draggable but use for function component and has implemented several new features.

Installation

npm install --save react-handle-dnd-resize

Then you will need to install peer dependency

Usage

import React, { Component } from "react";
import ResizableRect from "react-handle-dnd-resize";

const Component = () => {
  const [state, setState] = useState({
    width: 100,
    height: 100,
    top: 100,
    left: 100,
    rotateAngle: 0,
  });

  const handleResize = (style, isShiftKey, type) => {
    const { top, left, width, height } = style;
    setState((prevState) => ({
      ...prevState,
      top: Math.round(top),
      left: Math.round(left),
      width: Math.round(width),
      height: Math.round(height),
    }));
  };

  const handleRotate = (rotateAngle) => {
    setState((prevState) => ({
      ...prevState,
      rotateAngle,
    }));
  };

  const handleDrag = (deltaX, deltaY) => {
    setState((prevState) => {
      return {
        ...prevState,
        left: prevState.left + deltaX,
        top: prevState.top + deltaY,
      };
    });
  };

  const { width, top, left, height, rotateAngle } = state;

  return (
    <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={handleRotate}
      // onRotateEnd={this.handleRotateEnd}
      // onResizeStart={this.handleResizeStart}
      onResize={handleResize}
      // onResizeEnd={this.handleUp}
      // onDragStart={this.handleDragStart}
      onDrag={handleDrag}
      // onDragEnd={this.handleDragEnd}
      // lineColor="#000"
      // resizeClassName="resize-class"
      // rotateColor="#000"
      // id="id-1"
      // className="class"
    >{children}</ResizableRect>
  );
};

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 | | | | children | ReactNode | | | | id | string | | | | className | string | | | | lineColor | string | | | | resizeClassName | string | | | | rotateColor | string | | |