【React】要素をドラッグして移動・サイズ変更できるライブラリ「react-rnd」

先日から要素をドラッグして移動させる方法ばかりですが…性懲りもせず、今回もそれについてです。
ただ、今回はドラッグでの移動とサイズ変更のみができるライブラリ「react-rnd」です。
昨日紹介した「re-position」ライブラリとは違い、回転はできません。
が、たくさん機能はいらない！というなら、シンプルでおすすめです。

GitHub のページはこちらから。

bokuweb/react-rnd: 🖱 A resizable and draggable component for React.
https://github.com/bokuweb/react-rnd

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

npm install react-rnd --save

後は、GitHub のサンプルコードを参考に、ページに実装していきます。

import Rnd from 'react-rnd';

<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}
>
  Rnd
</Rnd>

もっともシンプルなコードがこちらです。
上記では、初期の位置とサイズを指定しているだけです。

こちらで動作するかを確認した後、size や position でサイズと位置を保持し、onResize や onDrag でリサイズ中の要素のサイズや、ドラッグ中の要素の位置を取得し、size や position に反映する処理を追加するのが一番スムーズかと思います。
Props は他にも多数用意されているので、要件に合ったものを追加してください。

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