@dantecoder/react-resizablebox v2.0.0

React Resizable Box

A resizable, draggable, rotatable React widget.

installation

React 18 or higher:

npm install --save @dantecoder/react-resizablebox

React 17:

npm install --save @dantecoder/react-resizablebox@1.2.0

Usage

import React from 'react';
import { ResizableBox } from '@dantecoder/react-resizablebox';
import { OnDragHandler, OnResizeHandler, OnRotateHandler } from '@dantecoder/react-resizablebox';

const App = () => {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  const [left, setLeft] = useState(100);
  const [top, setTop] = useState(100);
  const [angle, setAngle] = useState(0);

  const onDragHandler: OnDragHandler = (e) => {
    setLeft(e.style.left);
    setTop(e.style.top);
  };

  const onResizeHandler: OnResizeHandler = (e) => {
    setLeft(e.style.left);
    setTop(e.style.top);
    setWidth(e.style.width);
    setHeight(e.style.height);
  };

  const onRotateHandler: OnRotateHandler = (e) => {
    setAngle(e.style.rotationDeg);
  };

  return (
    <div>
      <ResizableBox
        width={width}
        height={height}
        left={left}
        top={top}
        rotationDeg={angle}
        onDrag={onDragHandler}
        onResize={onResizeHandler}
        onRotate={onRotateHandler}
      />
    </div>
  );
};

Props

Event Handlers

All event handlers except the On<event>StartHandler handlers will create an event that can have the following properties:

The types used in each property are the following: