react-handle-dnd-resize v1.1.1

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