aritzmetal/typescript-react-infinite-masonry

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

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

yarn

  yarn add typescript-react-infinite-masonry

Example

import Masonry from 'typescript-react-infinite-masonry';

...
<Masonry
          datalength={elements.length}
          hasMore={true}
          loader={<LoaderComponent />}
          onLoaded={handleOnLoaded}
          threshold={0.95}
          next={() => {
            if (!loading) {
              loadMore()
            }
          }}
        >
          {elements.map(({ key }) => (
            <div
              key={key}
            />
          ))}
</Masonry>
...

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.