React-masonry-layout NPM

React Masonry Layout

Masonry Layout base on bricks.js with React. It comes with infinite scroll feature too !

Install

$ npm install react-masonry-layout

Usage

import React from 'react'
import MasonryLayout from 'react-masonry-layout'

class Masonry extends React.Component {

  state = {
    perPage: 10,
    items: Array(20).fill()
  }

  loadItems = () => {
      this.setState({
        items: this.state.items.concat(Array(this.state.perPage).fill())
      });
  }

  render() {
    return (
      <div className="App">

        <MasonryLayout
          id="masonry-layout"
          infiniteScroll={this.loadItems}>

          {this.state.items.map((v, i) => {
            let height = i % 2 === 0 ? 200 : 100;
            return (
              <div
                key={i}
                style={{
                  width: '100px',
                  height: `${height}px`,
                  lineHeight: `${height}px`,
                  color: 'white',
                  fontSize: '32px',
                  display: 'block',
                  background: 'rgba(0,0,0,0.7)'
                }}>
                {i}
              </div>
            )}
          )}

        </MasonryLayout>
      </div>
    );
  }
}

API

props	type	default	description
id	string	`null`	required
packed	string	`data-packed`	optional, see Bricks.js
sizes	array	`[ { columns: 2, gutter: 20 }, { mq: '768px', columns: 3, gutter: 20 }, { mq: '1024px', columns: 6, gutter: 20 } ]`	optional, see Bricks.js
position	boolean	`false`	optional, see Bricks.js
className	string	`''`	optional, the css classname you want to use
style	object	`{}`	optional, the inline style you want to use
infiniteScroll	function	`() => {}`	optional, the function that used to load more data
infiniteScrollContainer	string	`window`	optional, by default, it will listen to the `window`'s `scroll` event. If you want to listen to some `div`'s `scroll` event, please set the container's id to it
infiniteScrollDisabled	boolean	`false`	optional, if you don't want to trigger `infiniteScroll`, set it to `false`
infiniteScrollLoading	boolean	`false`	optional, when you are loading data, please set it to `true`, then the `infiniteScroll` will not trigger
infiniteScrollEnd	boolean	`false`	optional, when no more data, please set it to `true`, then the `infiniteScroll` will not trigger
infiniteScrollDistance	number	`200`	optional, the distance to trigger `infiniteScroll`
infiniteScrollSpinner	element	`<div>this is a loader</div>`	optional, override it if you want to custom the loading spinner
infiniteScrollEndIndicator	element	`<div>no more data</div>`	optional, override it if you want to custom the no more data indicator

getBricksInstance return the instance of bricks.js.

class C extends Component {
  onClick() {
    const bricksInstance = this.instance.getBricksInstance();
    // do stuffs
  }
  render = () => <MasonryLayout ref={instance => this.instance = instance}>
}