Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 

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;

About

A React.js mixin for using @desandro's Masonry

Resources

License

Releases

No releases published

Packages

No packages published