A React mixin for using Metafizzy Packery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


React Packery Mixin


A mixin for React.js to use Metafizzy Packery (Also available as a component - you should use that instead!)

Which version should I use?

React Packery Mixin 0.2.x is compatible with React 0.14 and above only. For older versions of React, use a 0.1.x version of React Packery Mixin.


  • The mixin is bundled with packery, so no additional dependencies needed!

  • You can optionally include Packery as a script tag as an override <script src='//cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js' />

  • To use the mixin

  • require the mixin

  • pass a reference and a packery options object

  • make sure you use the same reference as ref in your component

  • if you need to - access the packery object through this.packery in your component

  • example use in code

/** @jsx React.DOM */

'use strict';

var React = require('react');

var PackeryMixin = require('react-packery-mixin');

var packeryOptions = {
    transitionDuration: 0

module.exports = React.createClass({
    displayName: 'SomeComponent',

    mixins: [PackeryMixin('packeryContainer', packeryOptions)],

    render: function () {
        var childElements = this.props.elements.map(function(element){
           return (
                <div className="someclass">

        return (
            <div ref="packeryContainer">

License information (Metafizzy)

Commercial license

Packery may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Packery, a commercial license is required.


For non-commercial, personal, or open source projects and applications, you may use Packery under the terms of the GPL v3 License. You may use Packery for free.

Copyright (c) 2014 Metafizzy