【React】Pinterestのようなレイアウトを実装できるライブラリ「react-stack-grid」

今回は、子コンポーネントをページに並べる際に導入したライブラリ「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 に説明があるので、そちらを参考にしてください。
個人的によく使いそうなのは、columnWidthgutterWidthgutterHeightduration あたりかと思います。
columnWidth は表示する子コンポーネントの横幅です。数値で指定するか、文字列で "20%" のように指定することもできます。
なお、デフォルトは 150 です。
gutterWidthgutterHeight は、それぞれ子コンポーネント間の余白です。デフォルトはどちらも 5 です。
duration は描画時のアニメーションの描画時間です。デフォルトは 480 で、単位はミリ秒です。
今回のシステムでは、アニメーションはない方が自然かなと思ったので、今回は 0 を指定して、アニメーションなしにしました。

 

導入した感想ですが、とにかく実装が簡単でした!
デモページを見る感じでは、ブラウザのサイズ変更にも対応していそうでしたし、プロパティもかなり細かく指定できました。
画像を表示するページなどでも使えそうです。

以上、React で Pinterest のようなレイアウトを実装できるライブラリ「react-stack-grid」のご紹介でした。
ご参考になれば幸いです。

  •  この記事いいね! (0)
>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7 浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください。

CTR IMG