A masonry mixin for React.js

Usage no npm install needed!

<script type="module">
  import reactMasonryMixin from '';


React Masonry Mixin

npm version


A React.js Masonry mixin. (Also available as a component - you should use that instead!)

Live demo: (web) (github)


  • The mixin is now bundled with Masonry, so no additional dependencies needed!

  • You will have to use Masonry as a script dependency, as there is no complete npm module available at the moment.

  • You can optionally include Masonry as a script tag <script src='//' />

  • To use the mixin

  • require the mixin and inject React

  • pass a reference and a masonry options object

  • make sure you use the same reference as ref in your component

  • if you need to - access the masonry object through this.masonry in your component

  • example code

var React = require('react');
var MasonryMixin = require('react-masonry-mixin')(React);
var masonryOptions = {
    transitionDuration: 0
var SomeComponent = React.createClass({

    mixins: [MasonryMixin(React)('masonryContainer', masonryOptions)],
    render: function () {
        var childElements ={
           return (
                <div className="someclass">
        return (
            <div ref="masonryContainer">

module.exports = SomeComponent;