React-Grid-Layout：レスポンシブブレークポイントと v2 TypeScript API を備えた React グリッド
React 用の、レスポンシブ ブレークポイントを備えたドラッグ可能でサイズ変更可能なグリッド レイアウト。
ひと目でわかる
- これは何？
- React向けのドラッグ＆リサイズ可能なグリッドレイアウトライブラリ。レスポンシブブレークポイント、フック、プラグ可能な圧縮をサポート。
- 誰に向いている？
- v2 の書き直しにより、React-Grid-Layout は型付けされたモジュール型 API を備え、フックとプラグ可能な圧縮を実現しつつ、v1 ユーザー向けの互換パスも維持しています。リポジトリはアーカイブされておらず、README は issue と pull request を歓迎していますが、具体的なサポートやメンテナンスの約束はしていません。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 15 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
このライブラリが提供するもの | react-grid-layout/react-grid-layout
React-Grid-Layout は React 向けのグリッドレイアウトシステムで、README では Packery や Gridster に似ているが、レスポンシブブレークポイントをサポートしている点が異なると説明されています。React 専用で、jQuery は不要です。README には、ドラッグ＆リサイズ可能なウィジェット、静的ウィジェット、設定可能なパッキング（水平、垂直、オフ）、境界チェック、シリアライズ可能なレイアウト、ブレークポイントごとの個別レイアウトなどの機能がリストされています。プロジェクトは TypeScript で書かれており、リポジトリメタデータには 22,372 スターと 2,704 フォークがあります。
v2 の書き直しと移行パス | react-grid-layout/react-grid-layout
バージョン 2 は完全な TypeScript 書き直しです。ファーストクラスの型、useContainerWidth、useGridLayout、useResponsiveLayout などのフック、グリッド・ドラッグ・リサイズ・位置戦略・コンパクタのための合成可能な設定オブジェクトが追加されました。パッケージは複数のエントリポイントに分割されています。react-grid-layout はコンポーネントとフック、react-grid-layout/core は純粋なレイアウトアルゴリズム、react-grid-layout/legacy は v1 API、react-grid-layout/extras はオプションのコンポーネントを提供します。README には、必須の width プロップ、3px のドラッグ閾値、イミュータブルなコールバックパラメータ、UMD バンドルの削除など、破壊的変更が記載されています。素早く移行するには、react-grid-layout/legacy からインポートすれば、v1 との 100% ランタイム API 互換が得られます。
レスポンシブレイアウトとコンテナ幅の測定 | react-grid-layout/react-grid-layout
Responsive コンポーネントはブレークポイントを自動的に処理します。README には lg から xxs までのデフォルトのブレークポイントと対応する列数が示されています。width プロップは必須で、推奨されるのは useContainerWidth フックを使う方法です。このフックは ResizeObserver を使用し、width、containerRef、mounted、measureWidth を返します。他には、固定幅、外部の幅測定ライブラリ、レガシーな WidthProvider HOC があります。README のクイックスタート例では、ReactGridLayout と一緒にこのフックを使う方法が示されています。
カスタムグリッド制御のためのフック API | react-grid-layout/react-grid-layout
3 つのフックが文書化されています。useContainerWidth はコンテナ幅を測定します。useGridLayout はレイアウト状態とドラッグ・リサイズ・ドロップイベントを直接制御でき、カスタムプレースホルダのための dragState と isInteracting を含みます。useResponsiveLayout はブレークポイントとレイアウト生成を管理し、アクティブなブレークポイント、列数、ブレークポイントごとのレイアウト更新メソッドを公開します。README は各フックの型定義と使用例を提供し、カスタムグリッドコンポーネントやヘッドレス実装向けに位置づけています。
コンパクタと位置戦略による拡張 | react-grid-layout/react-grid-layout
圧縮は、type、allowOverlap、preventCollision、compact メソッドを持つ Compactor インターフェースを通じてプラグ可能です。組み込みコンパクタには、垂直、水平、noCompactor があります。README では、重力コンパクタや単一列シェルフコンパクタなどのカスタムコンパクタの例を示し、core エントリポイントから collides や getStatics などのヘルパー関数をエクスポートしています。位置戦略は calcStyle と calcDragPosition を通じて CSS 配置を制御します。組み込みオプションには transform と absolute、またスケーリングされたコンテナ用の createScaledStrategy があります。extras エントリポイントは、SVG グリッド背景である GridBackground と、O(n log n) の複雑さを持つ高速コンパクタを提供し、README にはベンチマーク表があります。
パフォーマンスの指針とプロジェクトの状態 | react-grid-layout/react-grid-layout
README は、グリッドが子要素を参照で比較するため、子要素をメモ化することを推奨しています。また、レガシーな WidthProvider HOC を使う際にレンダリング中にコンポーネントを作成しないよう警告しています。プロジェクトは MIT ライセンスで、著作権は Samuel Reed に帰属し、ライセンス文はソフトウェアが「現状のまま」提供され、保証がないことを述べています。リポジトリメタデータには 22,372 スター、2,704 フォーク、80 のオープン issue があり、リポジトリはアーカイブされていません。README には、セキュリティ保証、サポート応答時間、リリーススケジュールは記載されていません。
v2ではwidthプロパティが必須になり、コンテナ幅を自前で測るかuseContainerWidthを使います。ドラッグ開始イベントはmousedown直後ではなく3px移動後に発火し、クリック直後の処理が必要ならonMouseDownを使うという変更があります。コールバック引数はイミュータブルになったため、受け取ったレイアウトを直接変更する実装は移行時に見直しが必要です。
基本パッケージにはReactコンポーネントとフック、coreにはフレームワーク非依存のレイアウトアルゴリズム、legacyにはv1のフラットなprops API、extrasにはGridBackgroundなどが分かれています。positionStrategyはtransformまたはabsolute、compactorはvertical、horizontal、noCompactorから選べます。子要素は参照比較されるためメモ化が性能条件になります。まずlegacyで既存画面を動かし、width、onDragStart、onLayoutChangeの挙動をv2 APIへ一つずつ移すのが現実的です。
編集部の結論
v2 の書き直しにより、React-Grid-Layout は型付けされたモジュール型 API を備え、フックとプラグ可能な圧縮を実現しつつ、v1 ユーザー向けの互換パスも維持しています。リポジトリはアーカイブされておらず、README は issue と pull request を歓迎していますが、具体的なサポートやメンテナンスの約束はしていません。
コミュニティノート