Skip to content
This repository has been archived by the owner on Aug 19, 2020. It is now read-only.

skoob13/react-masonry-infinite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Masonry Infinite

npm

Deprecation Notice

This library is no longer supported. I recommend to use better alternatives such as react-virtualized with virtualization from the box or react-masonry-css (you can use react-window or react-virtual for infinite scrolling).

About

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.

Demo

Demo page

Features

Instalation

Using NPM

  npm install --save react-masonry-infinite 

Using yarn

  yarn add react-masonry-infinite 

Basic example

import MasonryInfiniteScroller from 'react-masonry-infinite';

...
<MasonryInfiniteScroller
    hasMore={this.state.hasMore}
    loadMore={() => this.setState({ elements: this.state.elements.push("Element") })}
>
    {
        this.state.elements.map(id =>
            <div key={id} />
        )
    }
</MasonryInfiniteScroller>
...

Props

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 left CSS properties.
style Object {} The inline style

And other React Infinite Scroller props.

Methods

Method Description
forcePack Packs Bricks.js instance (usefull when data is dynamic)
forceUpdate Updates Bricks.js instance
createNewInstance Recreates Bricks.js instance. E.g. when you need to dynamically handle amount of columns.

License

MIT