Popularity
2.9
Declining
Activity
0.0
Stable
176
5
38

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Layout     React     React-component     Mixin     Masonry     Packery     Isotope    

react-masonry-mixin alternatives and similar libraries

Based on the "UI Layout" category.
Alternatively, view react-masonry-mixin alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-masonry-mixin or a related project?

Add another 'UI Layout' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
Sponsored www.saashub.com

README

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;