React Masonry Infinite

![npm](https://npmjs.com/react-masonry-infinite)

Very simple React.js component for masonry grid. Based on Bricks.js, React Infinite Scroller and React Masonry Layout.

Component is mostly suitable for static data, but can be used with dynamic with instance methods.

$3

Demo page

$3

- Masonry layout
- Perfomance of Bricks.js (Bricks.js homepage)
- Infinite scroll from a box

$3

Using NPM

``sh npm install --save react-masonry-infinite`

Using yarn

`sh yarn add react-masonry-infinite`

`$3`

js
import MasonryInfiniteScroller from 'react-masonry-infinite';
...
    hasMore={this.state.hasMore}
    loadMore={() => this.setState({ elements: this.state.elements.push("Element") })}
>
    {
        this.state.elements.map(id =>


        )
    }

...

$3

|Props|Type|Default|Description| |:-:|:-:|:--|:--| | className | String |''| CSS className for root element | | pack | Boolean |false| Flag to force pack on every update | | packed | String |data-packed | An attribute added to the grid items after they're positioned within the grid. If the attribute is not prefixed with data-, it will be added. See Bricks.js | | sizes | Array |[{ columns: 1, gutter: 20 }, { mq: '768px', columns: 2, gutter: 20 }, { mq: '1024px', columns: 3, gutter: 20 }]| An array of objects describing the grid's properties at different breakpoints. When defining your sizes, note the rules of Bricks.js | | position | Boolean |true | A Boolean indicating that the grid items should be positioned using the top and leftCSS properties. | | style | Object |{}` | The inline style |

And other React Infinite Scroller props.

$3

$3

MIT