MasonryをReactで使う

概要

写経していたテンプレートがMasonryを使っていたので試しました。
Masonryは指定した要素を自動的にタイル状に並べてくれるライブラリです。

百聞は一件に如かずで写経元のサンプルコードはこちら
※ 『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という書籍のサンプルです。

先行事例をさっと探したら
react-masonry-componentというものがあり、Starも356あるのでこれを使うことにしました。

インストール

npm install --save react-masonry-component

サンプル

前後は略します

import Masonry from 'react-masonry-component'; 
class Gallery extends Component {
  render() {
    var options = {
      itemSelector: '.item',
      columnWidth: 180,
    };
    return (
      <Masonry options={options}>
        <Box />
        <Box />
        <Box />
        <Box />
      </Masonry>
    );
  }
}

class Box extends Component {
  render() {
    return (
      <section className="item">
        /* 略 */
      </section>
    );
  }
}

で要素を囲んであげる感じです。
別途jQueryは必要ではありません。