0.2.1 • Published 2 years ago
typescript-react-infinite-masonry v0.2.1
About
A simple Masonry component that works out of the box. It is based on:
Its use is intended for not so large amounts of elements on screen.
Instalation
npm
npm install --save typescript-react-infinite-masonryyarn
yarn add typescript-react-infinite-masonryExample
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 | position | Boolean | true | A Boolean indicating that the grid items should be positioned using thetopandleftCSS props. | style | Object | {} | The inline extra style |
It inherits also props from react-infinite-scroll-component.