kevinchiu / react-masonry-component

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Masonry Component

npm version Build Status

The below information is for the 4.0.0 release.

Follow these links for 1.x.x documentation and 2.x.x documentation

IE8 support

if you wish to have IE8 support, v2 with React 0.14 support is the highest version available.

Table of contents

  1. Which version should I use?
  2. Usage
  3. Basic usage
  4. Custom props
  5. Accessing Masonry instance
  6. Using with Webpack
  7. Dependencies
  8. Webpack config

Introduction:

A React.js Masonry component. (Also available as a mixin if needed)

Which version should I use?

React Masonry Component 3.x.x is compatible with React 0.14 and above only. For older versions of React, use a 1.x.x version of React Masonry Component.

Live demo:

hearsay.me

Usage:

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

  • You can optionally include Masonry as a script tag if the should be any reason for doing so <script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />

  • To use the component just require the module.

Basic usage
var React = require('react');
var Masonry = require('react-masonry-component');

var masonryOptions = {
    transitionDuration: 0
};

var Gallery = React.createClass({
    render: function () {
        var childElements = this.props.elements.map(function(element){
           return (
                <li className="image-element-class">
                    <img src={element.src} />
                </li>
            );
        });

        return (
            <Masonry
                className={'my-gallery-class'} // default ''
                elementType={'ul'} // default 'div'
                options={masonryOptions} // default {}
                disableImagesLoaded={false} // default false
            >
                {childElements}
            </Masonry>
        );
    }
});

module.exports = Gallery;
Custom props

You can also include your own custom props - EG: inline-style and event handlers.

var React = require('react');
var Masonry = require('react-masonry-component');

var masonryOptions = {
    transitionDuration: 0
};

var style = {
    backgroundColor: 'tomato'
};

var Gallery = React.createClass({
    handleClick: function() { },

    render: function () {
        return (
            <Masonry
                className={'my-gallery-class'}
                style={style}
                onClick={this.handleClick}
            >
                {...}
            </Masonry>
        );
    }
});

module.exports = Gallery;
Accessing Masonry instance

Should you need to access the instance of Masonry (for example to listen to masonry events) you can do so by using refs.

var React = require('react');
var Masonry = require('react-masonry-component');


var Gallery = React.createClass({
   handleLayoutComplete: function() { },

   componentDidMount: function() {
       this.masonry.on('layoutComplete', this.handleLayoutComplete);
   },

   componentWillUnmount: function() {
       this.masonry.off('layoutComplete', this.handleLayoutComplete);
   },

    render: function () {
        return (
            <Masonry
                ref={function(c) {this.masonry = c.masonry;}.bind(this)}
            >
                {...}
            </Masonry>
        );
    }
});

module.exports = Gallery;

Using with Webpack

Because webpack resolves AMD first, you need to use the imports-loader in order to disable AMD and require as commonJS modules.

Dependencies

First ensure you have the imports-loader installed

npm install imports-loader --save
Webpack config

Then add the rules for the imports-loader to your webpack config. The babel-loader is used below to show how you can use the 2 together.

loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
    },
    {
        test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
        loader: 'imports?define=>false&this=>window'
    }
]

About

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

License:MIT License


Languages

Language:JavaScript 96.0%Language:CSS 4.0%