react-fast-masonry

A react masonry library featuring infinite-scrolling capabilities using bricks.js and react-intersection list. It's based off react-masonry-infinite, but uses react-intersection-list instead of react-infinite-scroll for faster infinite scrolling.

Since it's based on bricks.js you will need to set all of your items within the masonry container to be the same width. What makes this different then bricks.js is it allows container-queries on it's sizing options rather than media queries. It also allows you to set custom widths at those container query breakpoints.

Installing

npm i --save react-fast-masonry

Usage

First import the library react-fast-masonry

import MasonryLayout from "react-fast-masonry";

Then use it like so.

<MasonryLayout
  // This is a required prop this defines how wide your gutters and columns are (required) and optionally provides a way to  define your column-width (columnWidth) and container-queries (cq)
  sizes={[
    { columns: 1, gutter: 0, columnWidth: "100%" },
    { cq: 768, columns: 2, gutter: 20, columnWidth: 300 },
    { cq: 1024, columns: 3, gutter: 20, columnWidth: 400 }
  ]}
  items={this.state.items}
  // The columnWidth here comes from the sizes prop up above
  renderItem={({ columnWidth }, index: number, key: any) => (
    <div
      style={{
        width: columnWidth
      }}
      key={key}
    >
      {index}
    </div>
  )}
  loadMore={this.loadMore}
  awaitMore={true}
  pageSize={20}
  className="masonry"
/>

A full fledged example of the above might is given as the Simple masonry layout in the storybook.