react-rndの使い方を徹底解説する

はじめに

リサイズやドラッグが可能なコンポーネントを作成できる、react-rndというライブラリがあるのを知りました。

業務で使っていたのですが、あまり情報が充実していなかったので、その使い方について徹底的に解説します。

前提条件

使用している各ライブラリ等のバージョンは以下の通りです。

ツール	バージョン
React	18.2.0
TypeScript	5.2.2
react-rnd	10.4.12
Vite	5.2.0

基本的な使い方

インストール

以下のコマンドでインストールします。

npm install react-rnd

基本の形

<Rnd>
  <div style={{ border: "2px solid blue", padding: 5 }}>
    テストコンポーネント
  </div>
</Rnd>

Rndコンポーネントを使用します。
リサイズ、ドラッグさせたいコンポーネントを子コンポーネントとして設定します。
これだけで、画面上で自由にサイズや位置を変更できるコンポーネントが出来上がります。

様々なオプション

Rndコンポーネントには多くのPropsが用意されており、それらを使用することで、より細かい設定を行うことができます。
すべてのPropsは任意項目となっています。

default

概要

コンポーネントの初期状態の位置、および大きさを設定できます。

設定方法

<Rnd default={{ x: 10, y: 10, width: 100, height: '100px' }}>
  {/* 任意のコンポーネント */}
</Rnd>

x、yは数値で、コンポーネントの左上がくる座標の位置を指定します。
widht、heightは数値、または文字列で設定します。
数値で指定した場合はpxとして処理されます。
文字列の場合はpxや%などでの指定が可能です。

size

概要

コンポーネントの大きさを指定します。
defaultとsizeの両方が指定されている場合、sizeの値が使用されます。
stateで大きさをコントロールしたい場合に使うとよいです。

設定方法

<Rnd size={{ width: 100, height: 100 }}>
  {/* 任意のコンポーネント */}
</Rnd>

設定できる値はdefaultのwidth、heightと同じです。

position

概要

コンポーネントの位置を指定します。
defaultとpositionの両方が指定されている場合、positionの値が使用されます。
stateで位置をコントロールしたい場合に使うとよいです。

設定方法

<Rnd position={{ x: 30, y: 30 }}>
  {/* 任意のコンポーネント */}
</Rnd>

設定できる値はdefaultのx、yと同じです。

className

概要

一般的なコンポーネントに設定するclassNameと同じです。設定方法は省略します。

style

概要

一般的なコンポーネントに設定するstyleと同じです。設定方法は省略します。

minWidth、maxWidth、minHeight、maxHeight

概要

それぞれ、コンポーネントの最小幅、最大幅、最小高さ、最大高さを設定します。
リサイズした場合でも、設定した値の内で収まるようになります。

設定方法

<Rnd minWidth={200} maxWidth={400} minHeight={200} maxHeight={400}>
  {/* 任意のコンポーネント */}
</Rnd>

設定できる値はdefaultのwidth、heightと同じです。
また、4つすべてを設定する必要はありません。いずれか一つのみの設定も可能です。

resizeGrid

概要

コンポーネントをリサイズする際の増分値を指定できます。

設定方法

<Rnd resizeGrid={[5, 5]}>
  {/* 任意のコンポーネント */}
</Rnd>

値は数値の配列で指定します。x軸方向の増分値、y軸方向の増分値となっています。
デフォルトは[1, 1]です。

dragGrid

概要

コンポーネントをドラッグする際の増分値を指定できます。

設定方法

<Rnd dragGrid={[5, 5]}>
  {/* 任意のコンポーネント */}
</Rnd>

値は数値の配列で指定します。x軸方向の増分値、y軸方向の増分値となっています。
デフォルトは[1, 1]です。

lockAspectRatio

概要

コンポーネントのアスペクト比を固定できます。

設定方法

<Rnd  lockAspectRatio={true}>
  {/* 任意のコンポーネント */}
</Rnd>

真偽値、もしくは数値を設定できます。
trueとした場合は、初期値のコンポーネントのアスペクト比を維持します。
16/9のようなアスペクト比の数値を設定した場合は、その設定した数値を維持します。

まとめ

まだまだ多くのPropsがありますが、すべてを紹介しきれていないので、今後追記していく予定です。