Gathering detailed insights and metrics for react-masonry-component
Gathering detailed insights and metrics for react-masonry-component
Gathering detailed insights and metrics for react-masonry-component
Gathering detailed insights and metrics for react-masonry-component
react-masonry-css
React Masonry component leveraging CSS to be fast and responsive
react-responsive-masonry
React responsive masonry component built with css flexbox
masonic
<hr> <div align="center"> <h1 align="center"> 🧱 masonic </h1>
react-masonry-infinite
React component for masonry infinite grid. Based on Bricks.js, React Infinite Scroller and React Masonry Layout.
npm install react-masonry-component
Typescript
Module System
Node Version
NPM Version
JavaScript (93.76%)
CSS (6.24%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
1,458 Stars
201 Commits
144 Forks
22 Watchers
13 Branches
29 Contributors
Updated on Jul 13, 2025
Latest Version
6.3.0
Package Id
react-masonry-component@6.3.0
Size
8.54 kB
NPM Version
6.14.8
Node Version
14.15.0
Published on
Jul 17, 2021
Cumulative downloads
Total Downloads
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
1
if you wish to have IE8 support, v2 with React 0.14 is the highest version available.
A React.js Masonry component. (Also available as a mixin if needed)
The component is bundled with Masonry, so no additional dependencies needed!
You can optionally include Masonry as a script tag if there should be any reason for doing so
<script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />
To use the component just require the module.
npm install --save react-masonry-component
1import * as React from 'react'; 2import Masonry from 'react-masonry-component'; 3 4const masonryOptions = { 5 transitionDuration: 0 6}; 7 8const imagesLoadedOptions = { background: '.my-bg-image-el' } 9 10class Gallery extends React.Component { 11 render() { 12 const childElements = this.props.elements.map(function(element){ 13 return ( 14 <li className="image-element-class"> 15 <img src={element.src} /> 16 </li> 17 ); 18 }); 19 20 return ( 21 <Masonry 22 className={'my-gallery-class'} // default '' 23 elementType={'ul'} // default 'div' 24 options={masonryOptions} // default {} 25 disableImagesLoaded={false} // default false 26 updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false 27 imagesLoadedOptions={imagesLoadedOptions} // default {} 28 > 29 {childElements} 30 </Masonry> 31 ); 32 } 33} 34 35export default Gallery;
ES6-style modules are also supported, just use:
1import Masonry from 'react-masonry-component';
You can also include your own custom props - EG: inline-style and event handlers.
1import * as React from 'react'; 2import Masonry from 'react-masonry-component'; 3 4const masonryOptions = { 5 transitionDuration: 0 6}; 7 8const style = { 9 backgroundColor: 'tomato' 10}; 11 12class Gallery extends React.Component { 13 handleClick() {} 14 render() { 15 return ( 16 <Masonry 17 className={'my-gallery-class'} 18 style={style} 19 onClick={this.handleClick} 20 > 21 {...} 22 </Masonry> 23 ); 24 } 25} 26 27export default Gallery;
Should you need to access the instance of Masonry (for example to listen to masonry events)
you can do so by using refs
.
1import * as React from 'react'; 2import Masonry from 'react-masonry-component'; 3 4class Gallery extends React.Component { 5 handleLayoutComplete() { }, 6 7 componentDidMount() { 8 this.masonry.on('layoutComplete', this.handleLayoutComplete); 9 }, 10 11 componentWillUnmount() { 12 this.masonry.off('layoutComplete', this.handleLayoutComplete); 13 }, 14 15 render() { 16 return ( 17 <Masonry 18 ref={function(c) {this.masonry = this.masonry || c.masonry;}.bind(this)} 19 > 20 {...} 21 </Masonry> 22 ); 23 } 24} 25 26export default Gallery;
React Masonry Component uses Desandro's imagesloaded
library to detect when images have loaded. Should you want to pass
options down to it then you need to populate the imagesLoadedOptions
property on React Masonry Component.
This will most commonly be used when the elements in your gallery have CSS background images and you want to capture their load event. More info availabe on the imagesloaded website.
eg:
1import * as React from 'react'; 2import Masonry from 'react-masonry-component'; 3 4class Gallery extends React.Component { 5 render() { 6 const imagesLoadedOptions = { background: '.my-bg-image-el' } 7 8 return ( 9 <Masonry 10 className={'my-gallery-class'} 11 elementType={'ul'} 12 options={masonryOptions} 13 imagesLoadedOptions={imagesLoadedOptions} 14 > 15 <div className="my-bg-image-el"></div> 16 </Masonry> 17 ); 18 } 19} 20 21export default Gallery;
onImagesLoaded
- triggered when all images are loaded or after each image is loaded when updateOnEachImageLoad
is set to true
onLayoutComplete
- triggered after a layout and all positioning transitions have completed.onRemoveComplete
- triggered after an item element has been removed1class Gallery extends React.Component { 2 componentDidMount() { 3 this.hide(); 4 }, 5 handleImagesLoaded(imagesLoadedInstance) { 6 this.show(); 7 }, 8 render() { 9 return ( 10 <Masonry 11 onImagesLoaded={this.handleImagesLoaded} 12 onLayoutComplete={laidOutItems => this.handleLayoutComplete(laidOutItems)} 13 onRemoveComplete={removedItems => this.handleRemoveComplete(removedItems)} 14 > 15 {...} 16 </Masonry> 17 ) 18 } 19}
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 8/19 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
86 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
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