About

A simple Masonry component that works out of the box. It is based on:

• Bricks.js
• react-infinite-scroll-component

Its use is intended for not so large amounts of elements on screen.

Instalation

npm

1  npm install --save typescript-react-infinite-masonry

yarn

1  yarn add typescript-react-infinite-masonry

Example

1import Masonry from 'typescript-react-infinite-masonry';
2
3...
4<Masonry
5          datalength={elements.length}
6          hasMore={true}
7          loader={<LoaderComponent />}
8          onLoaded={handleOnLoaded}
9          threshold={0.95}
10          next={() => {
11            if (!loading) {
12              loadMore()
13            }
14          }}
15        >
16          {elements.map(({ key }) => (
17            <div
18              key={key}
19            />
20          ))}
21</Masonry>
22...

Props

Props	Type	Default	Description
className	String	''	className for root node styles
pack	Boolean	false	If it is true uses pack instead of update function on every update
packed	String	datum--packed	Attribute added to the items after they are positioned. Detailed: Bricks.js
sizes	Array	[{ columns: 1, gutter: 16 }, { mq: "768px", columns: 2, gutter: 16 }, { mq: "1024px", columns: 3, gutter: 16 }, { mq: "1200px", columns: 4, gutter: 16 },]	Grid properties for every media breakpoint. See Bricks.js

It inherits also props from react-infinite-scroll-component.