Can you also include the styles, could not get the padding to display right using bootstrap

[thachp]

In the example, you have class name open to customization, would it be possible also to provide those styles as an optional dependency?

           ... // image 
           <li className="image-element-class">

            .... // gallery
            className={'my-gallery-class'} // default ''

I am using bootstrap's thumbnail component, and it is not working for me at all. The functionalities are working, but the styling looks off. For example, there are no padding between each child elements.

    var React = require('react');
    var Masonry = require('react-masonry-component')(React);
    var elements = [{src: "http://placehold.it/350x150"}, {
        src: "http://placehold.it/350x150"
    }, {src: "http://placehold.it/350x150"}, {src: "http://placehold.it/350x150"}, {src: "http://placehold.it/350x150"}];

    var masonryOptions = {
        transitionDuration: 0
    };

    var Gallery = React.createClass({
        render: function () {

            var childElements = this.props.elements.map(function (element) {
                return (
                        <div className="col-xs-6 col-md-4 col-lg-3">
                            <a href="#" className="thumbnail">
                                <img src={element.src} alt="example"/>
                            </a>
                        </div>
                );
            });

            return (
                <Masonry
                    className={'row'} // default ''
                    elementType={'div'} // default 'div'
                    options={masonryOptions} // default {}
                    disableImagesLoaded={false} // default false
                >
                    {childElements}
                </Masonry>
            );
        }
    });

    module.exports = Gallery;

[eiriklv]

Ideally it should be possible to forward any props to the MasonryComponent top element. It just wasn't done at the time. There's a PR for it (#7) that I'll try to merge when i have time. In the meantime you could try that one :-)

[afram]

@thachp This should be fixed in 3.0.0

Do you mind please trying if it works for you by giving the 3.0.0 beta a spin?

npm install react-masonry-component@3.0.0-rc.1

This version no longer requires passing in React as an argument, you can require the component and use it straight away. More info in the Readme

[thachp]

@afram - Works like charms. Thank you