今回は、子コンポーネントをページに並べる際に導入したライブラリ「react-stack-grid」のご紹介です。
現在開発中のシステムで、カードコンポーネントを複数並べるというレイアウトを実装したのですが、このカードコンポーネントの高さにばらつきがあったので、その状態でも綺麗に配置できないか…と調べたところ、「react-stack-grid」ライブラリがヒットしました。
GitHub のページはこちら。
GitHub – tsuyoshiwada/react-stack-grid
https://github.com/tsuyoshiwada/react-stack-grid
上記ページのデモページを見るのが一番わかりやすいですが、こちらのライブラリを使うと、高さにばらつきのあるコンポーネントの上下の余白を詰めて均一にしてくれます。
さて、導入方法ですが、まずライブラリを下記コマンドでインストールします。
npm install react-stack-grid --save
インストールが完了したら、実装したいページにインポートします。
下記は GitHub に掲載されているサンプルコードです。
import React from "react";
import StackGrid from "react-stack-grid";
const ExamplePage = () => {
return (
<StackGrid columnWidth={150}>
<div key="key1">Item 1</div>
<div key="key2">Item 2</div>
<div key="key3">Item 3</div>
</StackGrid>
);
}
プロパティについては GitHub に説明があるので、そちらを参考にしてください。
個人的によく使いそうなのは、columnWidth、gutterWidth、gutterHeight、duration あたりかと思います。
columnWidth は表示する子コンポーネントの横幅です。数値で指定するか、文字列で "20%" のように指定することもできます。
なお、デフォルトは 150 です。
gutterWidth、gutterHeight は、それぞれ子コンポーネント間の余白です。デフォルトはどちらも 5 です。
duration は描画時のアニメーションの描画時間です。デフォルトは 480 で、単位はミリ秒です。
今回のシステムでは、アニメーションはない方が自然かなと思ったので、今回は 0 を指定して、アニメーションなしにしました。
導入した感想ですが、とにかく実装が簡単でした！
デモページを見る感じでは、ブラウザのサイズ変更にも対応していそうでしたし、プロパティもかなり細かく指定できました。
画像を表示するページなどでも使えそうです。
以上、React で Pinterest のようなレイアウトを実装できるライブラリ「react-stack-grid」のご紹介でした。
ご参考になれば幸いです。
