React Masonry Component

The below information is for the 3.0.0 release.

Follow these links for 1.x.x documentation and 2.x.x documentation

Table of contents

1. Which version should I use?
2. Usage
3. Basic usage
4. Custom props
5. Accessing Masonry instance
6. Using with Webpack
7. Dependencies
8. 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:

hearsay.me

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'
    }
]