haoza / react-draggable-resizable

react draggable resizable

ReactDraggableResizable

中文文档

React Component for draggable and resizable elements.

Thanks

Thanks to @mauricius for his work on vue-draggable-resizable component.

The current first version is a direct translation of react based on vue-draggable-resizable, which will be refactored later.

All properties and interfaces are consistent with vue-draggable-resizable

all Events: add "on" in front of its name.

eq: "activated" --> "onActivated"

Install and basic usage

$ npm install --save react-draggable-resizable-scalable

import { ReactDraggableResizable } from "/react-draggable-resizable";
import "/react-draggable-resizable/style.css"

const App = () => {
  return (
    <div className="content">
      <div
        style={{
          height: "500px",
          width: "500px",
          border: " 1px solid red",
          position: "relative",
        }}
      >
        <ReactDraggableResizable
          w={100}
          h={100}
          y={10}
          x={30}
          parent="true"
          draggable
          resizable
          active
        >
          <p>
            Hello! I'm a flexible component. You can drag me around and you can
            resize me.
          </p>
        </ReactDraggableResizable>
      </div>
    </div>
  );
};

export default App;

Contact me

please email [e-mail]

License

The MIT License (MIT). Please see License File for more information.