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}>
}

License

MIT.