【React】要素をドラッグ・サイズ変更・回転できるライブラリ「re-position」

先日、「【React】要素をドラッグ＆ドロップで移動できるライブラリ「react-draggable」」で紹介したものとはまた別のライブラリです。
「react-draggable」ライブラリは、要素内でつかめる要素を指定できるのが良いのですが、「re-position」ライブラリでは、要素のサイズ変更と回転をマウス操作で行うことができます。
このあたりは、実装する機能で使い分けてください。

「re-position」ライブラリの GitHub のページはこちらから。

rmarganti/re-position: Drag, resize, and rotate all in one flexible React component.
https://github.com/rmarganti/re-position

使い方ですが、まず下記コマンドでライブラリをインストールします。

npm install re-position --save

サンプルコードは下記のとおりです。

import { PositionableContainer } from "re-position";

this.updateShape = (e) => {
  this.setState({
    top: Number(e.top.replace('px', '')),
    left: Number(e.left.replace('px', '')),
    width: Number(e.width.replace('px', '')),
    height: Number(e.height.replace('px', '')),
    rotation: Number(e.rotation.replace('deg', '')),
  });
}

描画部分は下記のとおりです。

<PositionableContainer
  movable={true}
  resizable={true}
  rotatable={true}
  position={{
    top: `${this.state.top}px`,
    left: `${this.state.left}px`,
    rotation: `${this.state.rotation}deg`,
    width: `${this.state.width}px`,
    height: `${this.state.height}px`,
  }}
  onUpdate={this.updateShape}>
  <div>
    <!-- ドラッグしたい要素をここに記載 -->
  </div>
</PositionableContainer>

私は諸事情あって px や deg 等の単位を含まない数値を state に保存するようにしたかったので、onUpdate で呼び出している関数内で単位を削除し、描画する際には単位を追加するというちょっと面倒な作業を行っています。
ですが、その必要がない場合は、素直に単位付きのまま state に保存し、それらの値をそのまま描画するコンポーネントに渡すという処理を行えばOKです。

こちらを実行したところ、GitHub にあるサンプルのアニメーション GIF のとおりに動作しました！
最初は回転する際に操作する矢印がちょっと押しにくいかも？と思ったのですが、慣れてしまえば問題なさそうです。
それ以外は、かなり直感的に操作できます。

以上、React で要素をドラッグ・サイズ変更・回転できるライブラリ「re-position」のご紹介でした。
ご参考になれば幸いです。