react-packery-component

    1.0.2 • Public • Published

    React Packery Component

    npm version

    Introduction:

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

    Support

    React >= 0.14.x

    Live demo:

    hearsay.me

    Usage:

    • The component bundles Packery, so no additional dependencies needed!

    • You can optionally include Packery as a script tag if there should be any reason for doing so: <script src='//cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js' />

    • To use the component just require the module and inject React

    • Example code:

    var React = require('react');
    var Packery = require('react-packery-component')(React);
     
    var packeryOptions = {
        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 (
                <Packery
                    className={'my-gallery-class'} // default ''
                    elementType={'ul'} // default 'div'
                    options={packeryOptions} // default {}
                    disableImagesLoaded={false} // default false
                >
                    {childElements}
                </Packery>
            );
        }
    });
     
    module.exports = Gallery;

    Install

    npm i react-packery-component

    DownloadsWeekly Downloads

    60

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • bskimball
    • lucbelliveau
    • eiriklv