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
var React = ;var Masonry = ;var masonryOptions =transitionDuration: 0;var Gallery = React;moduleexports = Gallery;
ES6-style modules are also supported, just use:
You can also include your own custom props - EG: inline-style and event handlers.
var React = ;var Masonry = ;var masonryOptions =transitionDuration: 0;var style =backgroundColor: 'tomato';var Gallery = React;moduleexports = Gallery;
Should you need to access the instance of Masonry (for example to listen to masonry events)
you can do so by using
var React = ;var Masonry = ;var Gallery = React;moduleexports = Gallery;
onImagesLoaded- triggered when all images are loaded or after each image is loaded when
updateOnEachImageLoadis set to
onLayoutComplete- triggered after a layout and all positioning transitions have completed.
onRemoveComplete- triggered after an item element has been removed
var Gallery = React;
Because webpack resolves AMD first, you need to use the imports-loader in order to disable AMD and require as commonJS modules.
First ensure you have the imports-loader installed
npm install imports-loader --save
Then add the rules for the imports-loader to your webpack config.
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'