Reactを本格的に使っていく上では多くのコンポーネントが必要になります。その基礎となるのがグリッドではないでしょうか。グリッドが作れれば、その中にコンテンツを配置して整理されたレイアウトが作れるようになります。 今回紹介するのはReact Grid Layout、React用のグリッドレイアウトシステムです。ドラッグ&ドロップやリサイズにも対応しています。

React Grid Layoutの使い方

実際に使っているところです。ドラッグで移動したり、大きさの変更ができます。スタティックとして移動できないように指定することもできます。

さらにフリーレイアウトとして重ならないけれど縦の配置は自由と言ったレイアウトも作れます。

この他、配置情報をlocalStorageに保存しておいて復元できるようにする機能があったり、かなり多機能なグリッドシステムとなっています。業務システムやダッシュボードなどで使ってみると便利そうです。

React Grid LayoutはReact用/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

RGL Example 0 - Showcase STRML/react-grid-layout: A draggable and resizable grid layout with responsive breakpoints, for React.