A React.js mixin for using @desandro's Masonry
Switch branches/tags
Nothing to show
Clone or download
Latest commit e302c0b Nov 18, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib support IE8 Aug 17, 2015
.gitignore initial commit Oct 29, 2014
.npmignore initial commit Oct 29, 2014
LICENSE initial commit Oct 29, 2014
README.md It seems the Usage has changed. Aug 17, 2015
package.json bump version Nov 18, 2015

README.md

React Masonry Mixin

npm version

Introduction:

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

Live demo:

hearsay.me (web) hearsay.me (github)

Usage:

  • 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='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />

  • 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 = this.props.elements.map(function(element){
           return (
                <div className="someclass">
                    {element.name}
                </div>
            );
        });
        
        return (
            <div ref="masonryContainer">
                {childElements}
            </div>
        );
    }
});

module.exports = SomeComponent;