Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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='//' />

  • 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 ={
           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


A React mixin for using Metafizzy Packery



No releases published


No packages published