ReactでMasonryを使用する

MasonryというJavascript製のライブラリーを利用すると、カード型デザインのページ内で自動的に各カードを並べかえてくれます。カードのサイズがバラバラな場合、均等に横並びにするだけでは無駄なスペースが出来てしまうので、これを使うことで石段を積んだような綺麗な並びに作り変えられるのです。

このライブラリーはとても気に入っているので、なんとかReact上でも使いたいと思い導入してみたのですが、REST APIにアクセス → データ取得 → カード数の増減、こういった形でDOMに反映してからライフサイクルメソッドのcomponentDidUpdate内でレイアウトしてみたところ、ちらつきが発生してしまいました。DOMに反映されてから並び替えるという順序になるため、どうしても一瞬並び替える前のカードが表示されてしまうのです。

そこで他の人がどのようにReactにMasonryのライブラリーを導入しているのか調べてみたところ、有志の方がreact-masonry-componentというコンポーネントを公開してくれていました。これを使ってみたところ非常に簡単にカードの並び替え機能を利用することができるようになり、ちらつきもなし!

並び替え動画

いやーありがたい!優秀な人が様々なコンポーネントを提供してくれているおかげで本当に助かります。なんかこういう無償で何かを提供してくれている人たちに、お礼の寄付をするシステムがあればいいのになと思いますね。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)