scarletsky / react-masonry-layout

MasonryLayout base on bricks.js and react !

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.

react-masonry-layout's Issues

Unable to readjust all the bricks in the grid container

When we resize the window i need to adjust the number of column of my masonry.

Update plugin for new React

Could you update your plugin for support React 16

Left To Right sorting order

Hello! I need to order my grid items by "left-to-right" order. How I can reach that?

componengWillUnmount typo

Hi,
I've just saw a typo that probably is affecting the lifecycle:

insted o componentWillUnmount your're using componengWillUnmount, with a G

instance not updating when next props are the same length

I'm passing the same length of data to the MasonryLayout component but with updated items. I believe this block in componentDidUpdate is preventing the new items from being updated in the layout:

    if (prevProps.children.length !== this.props.children.length) {
      return instance.update()
    }

#5

Add screenshots to readme

This might seem trivial, but I think sample screenshots would be helpful to people.

Auto height?

Hi guys!
I'm seeing the documentation and seems like you always have to set the height.
What if I don't know which is the height of each component?

Typo in README: Size Prop

Looks like the "size" prop in the API section of the README should be "sizes", as defined in MasonryLayout.propTypes.

error compiling

 Error in ./src/App.jsx
Syntax error: Unexpected token (94:22)

  92 |     <MasonryLayout
  93 |       id="items"
> 94 |       infiniteScroll={::this.getItems}
     |                       ^
  95 |       infiniteScrollLoading={this.state.isLoading} >
  96 |  
  97 |       {this.state.items.map((v, i) => <div

layout not packing correctly unless resized

I just want to say I love this component, but when using infinite scroll it seems that its not packing or updating the bricks.js instance correctly causing the new items to stack up. For some reason though if i resize the window to 768px or 1024px after it stacks it causes it to reload normally

heres a video:
https://www.youtube.com/watch?v=n2h86FDW3l8&feature=youtu.be

(this is using next.js btw)

Thanks in advance!