Installations

npm install yundo-react-masonry-infinite

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.4.0

NPM Version

4.6.1 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

3

JavaScript

CSS

HTML

JavaScript (52.78%)

CSS (31.32%)

HTML (15.9%)

Developer

ydhn

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

27 Commits

1 Watchers

3 Branches

1 Contributors

Updated on Nov 15, 2017

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

1.2.4

Package Id

yundo-react-masonry-infinite@1.2.4

Size

5.45 kB

NPM Version

4.6.1

Node Version

8.4.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

bricks.js prop-types react-infinite-scroller

Peer Dependencies

1

react

Dev Dependencies

12

babel-cli babel-core babel-eslint babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 eslint eslint-plugin-react react react-dom rimraf

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.

Demo

Demo page

Features

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

Instalation

Using NPM

1  npm install --save react-masonry-infinite

Using yarn

1  yarn add react-masonry-infinite

Basic example

1import MasonryInfiniteScroller from 'react-masonry-infinite';
2
3...
4<MasonryInfiniteScroller hasMore={this.state.hasMore} loadMore={() => this.setState({ elements: this.state.elements.push("Element") })}>
5    {
6        this.state.elements.map((el, index) =>
7            <div key={index}/>
8        )
9    }
10</MasonryInfiniteScroller>
11...

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 Booleanean indicating that the grid items should be positioned using the `top` and `left` CSS properties.
style	Object	`{}`	The inline style
pageStart	Number	`0`	The page number corresponding to the initial `items`, defaults to `0` which means that for the first loading, loadMore will be called with `1`
loadMore	Function	`(pageToLoad) => {}`	This function is called when the user scrolls down and we need to load items
hasMore	Boolean	`true`	Booleanean stating whether there are more items to be loaded. Event listeners are removed if `false`
loader	DOMNode	`null`	Loader element to be displayed while loading items
threshold	Number	`250`	The distance between the bottom of the page and the bottom of the window's viewport that triggers the loading of new items
useWindow	DOMNode	`null`	Booleanean stating whether to add listeners to the window, or else, the DOMNode
element	String	`div`	Element type of infinite scroll container

Methods

Method	Description
forcePack	Packs Bricks.js instance (usefull when data is dynamic)
forceUpdate	Updates Bricks.js instance

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More