React Masonry Component
The below information is for the 4.0.0 release.
Follow these links for 1.x.x documentation and 2.x.x documentation
IE8 support
if you wish to have IE8 support, v2 with React 0.14 support is the highest version available.
Table of contents
- Which version should I use?
- Usage
- Basic usage
- Custom props
- Accessing Masonry instance
- Using with Webpack
- Dependencies
- Webpack config
Introduction:
A React.js Masonry component. (Also available as a mixin if needed)
Which version should I use?
React Masonry Component 3.x.x is compatible with React 0.14 and above only. For older versions of React, use a 1.x.x version of React Masonry Component.
Live demo:
Usage:
-
The component is bundled with Masonry, so no additional dependencies needed!
-
You can optionally include Masonry as a script tag if the 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.
Basic usage
var React = require('react');
var Masonry = require('react-masonry-component');
var masonryOptions = {
transitionDuration: 0
};
var Gallery = React.createClass({
render: function () {
var childElements = this.props.elements.map(function(element){
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Masonry
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={masonryOptions} // default {}
disableImagesLoaded={false} // default false
>
{childElements}
</Masonry>
);
}
});
module.exports = Gallery;
Custom props
You can also include your own custom props - EG: inline-style and event handlers.
var React = require('react');
var Masonry = require('react-masonry-component');
var masonryOptions = {
transitionDuration: 0
};
var style = {
backgroundColor: 'tomato'
};
var Gallery = React.createClass({
handleClick: function() { },
render: function () {
return (
<Masonry
className={'my-gallery-class'}
style={style}
onClick={this.handleClick}
>
{...}
</Masonry>
);
}
});
module.exports = Gallery;
Accessing Masonry instance
Should you need to access the instance of Masonry (for example to listen to masonry events)
you can do so by using refs
.
var React = require('react');
var Masonry = require('react-masonry-component');
var Gallery = React.createClass({
handleLayoutComplete: function() { },
componentDidMount: function() {
this.masonry.on('layoutComplete', this.handleLayoutComplete);
},
componentWillUnmount: function() {
this.masonry.off('layoutComplete', this.handleLayoutComplete);
},
render: function () {
return (
<Masonry
ref={function(c) {this.masonry = c.masonry;}.bind(this)}
>
{...}
</Masonry>
);
}
});
module.exports = Gallery;
Using with Webpack
Because webpack resolves AMD first, you need to use the imports-loader in order to disable AMD and require as commonJS modules.
Dependencies
First ensure you have the imports-loader installed
npm install imports-loader --save
Webpack config
Then add the rules for the imports-loader to your webpack config.
The babel-loader
is used below to show how you can use the 2 together.
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
loader: 'imports?define=>false&this=>window'
}
]