Non-Production Machines

    react-masonry-mixin

    2.1.0 • Public • Published

    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;

    Install

    npm i react-masonry-mixin

    DownloadsWeekly Downloads

    51

    Version

    2.1.0

    License

    MIT

    Last publish

    Collaborators

    • eiriklv