react-rndとは？Reactでドラッグ移動とリサイズを実装

概要

react-rndは、Reactの要素をドラッグ可能かつリサイズ可能にするコンポーネントです。初期位置・サイズを渡す簡単な使い方から、親stateでpositionとsizeを完全に制御する使い方まで対応します。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-21

位置とサイズを一つのRndコンポーネントで扱う

defaultで初期値を渡す非制御利用と、position・size・各callbackを使う制御利用を選べます。

出典：[2]

グリッド・比率固定・ハンドルを調整する

drag/resize grid、最小・最大サイズ、aspect ratio、ドラッグハンドル、リサイズハンドルなどを指定できます。

出典：[2]

ダッシュボードや編集画面の可動パネルに

ウィンドウ風UI、ダッシュボード、キャンバス上の要素など、利用者が位置や大きさを直接操作するReact画面に向きます。

出典：[2]

親要素のscaleと制御stateの同期に注意する

親側で拡大縮小している場合はscaleを合わせ、制御モードではonDragStopやonResizeStopで親stateを正しく更新してください。

出典：[2]

参考にした公式資料

[1]bokuweb/react-rnd repository(2026-09-21)
[2]react-rnd README(2026-09-21)
[3]react-rnd package(2026-09-21)
[4]react-rnd MIT license(2026-09-21)

編集部からの補足

react-rndはドラッグとリサイズを一つの`Rnd`コンポーネントへまとめたライブラリです。現在のパッケージは10.5.3で、peer dependencyはReact/React DOM 16.3以上です。親要素にCSS transformで拡大縮小をかける場合は`scale`を合わせないと移動量・リサイズ量がずれる点に注意してください。

3ステップで試す

1
react-rndを追加
公式READMEのnpm手順でパッケージをReactプロジェクトへ追加します。
npm i -S react-rnd
2
Rndコンポーネントを配置
defaultで初期位置とサイズを指定した最小構成を配置します。
<Rnd default={{ x: 0, y: 0, width: 320, height: 200 }}>Rnd</Rnd>
3
ドラッグとリサイズを確認
要素を移動・サイズ変更し、必要に応じてposition/sizeの制御モードへ発展させます。
Drag the element → resize from a handle

公式READMEで確認

成長

成長の推移 · 直近30日

4,325 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 25

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
drag
resize
resizable
component
draggable

Stars: 4,325
Forks: 330
Watchers: 19
Open Issues: 156
Contributors: 41
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/05/12

概要

特徴と向いている用途

位置とサイズを一つのRndコンポーネントで扱う

グリッド・比率固定・ハンドルを調整する

ダッシュボードや編集画面の可動パネルに

親要素のscaleと制御stateの同期に注意する

参考にした公式資料

3ステップで試す

react-rndを追加

Rndコンポーネントを配置

ドラッグとリサイズを確認

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪