react-gestalt-masonry

Masonry

Masonry creates a deterministic grid layout, positioning items based on available vertical space. It contains performance optimizations like virtualization and server rendering, as well as support for infinite scrolling.

Extracted from gestalt and ported to TypeScript by Kronuz.

Usage here: https://pinterest.github.io/gestalt/#/Masonry

import * from React from 'react';
import Masonry from 'masonry';

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.renderItem = this.renderItem.bind(this);
    this.loadItems = this.loadItems.bind(this);

    this.state = {
      items: [],
    }
  }

  renderItem({ data, itemIdx }) {
    return (
      <div
        style={{
          backgroundColor: `${data.color || '#f4f4f4'}`,
          paddingBottom: `${(data.naturalHeight / data.naturalWidth) * 100}%`,
          position: 'relative',
        }}
      >
        <img
          alt="masonry image"
          color={data.color}
          src={data.src}
          style={{ display: 'block', position: 'absolute', width: '100%' }}
        />
      </div>
    );
  }

  loadItems() {
    const items = []; // fetch and put items here
    this.setState({
      items,
    });

  }

  render() {
    return (
      <Masonry
        comp={this.renderItem}
        items={this.state.items}
        loadItems={this.loadItems}
        minCols={2}
        scrollContainer={() => window}
        virtualize
      />
    )
  }
}