Skip to content
React component for "packing" elements together in a pinterest-like layout
Branch: master
Clone or download
Latest commit 2c28306 Jan 17, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Fix incorrect child check, update demo Jan 17, 2017
src Fix incorrect child check, update demo Jan 17, 2017
umd Cleanup Nov 14, 2015
.eslintignore Code style fixes Nov 14, 2015
.eslintrc Cleanup Nov 14, 2015
.gitignore Cleanup Nov 14, 2015
.npmignore Cleanup Nov 14, 2015
LICENSE Initial import Jan 4, 2015
README.md Fix warning when using React 0.14 Nov 14, 2015
package.json 0.2.3 Jan 17, 2017
webpack.config.js Fix issue with react external name Nov 28, 2015
yarn.lock Upgrade dependencies, fix lint issues Jan 12, 2017

README.md

react-layout-pack

React component for "packing" elements together in a pinterest-like layout.

Demos

See the demo page.

Installation

react-layout-pack can be installed using npm:

npm install react-layout-pack

Basic usage

var React = require('react');
var ReactDom = require('react-dom');
var PackLayout = require('react-layout-pack');

// Render the component
ReactDom.render(
    <PackLayout tag="ul" className="packed-layout">
        <li>One element</li>
        <li>Another element</li>
        <li>A third element</li>
        <li>A fourth element</li>
        <li>A fifth element</li>
    </PackLayout>,
    document.getElementById('some-root-node')
);

Properties:

{
    // The root-level DOM node tag, defaults to 'ul'
    tag: React.PropTypes.string,

    // The width of each column, in pixels. If not set, will use width of first child
    columnWidth: PropTypes.number,

    // Margin between each item, in pixels. Defaults to 10.
    itemMargin: PropTypes.number,

    // Whether to automatically reposition elements when the window is resized. Defaults to true.
    repositionOnResize: PropTypes.bool,

    // How often the repositioning should be performed while the browser is being resized. Defaults to 250ms.
    resizeThrottleTimeout: PropTypes.number
}

Important notes

  • This is a component in early development, and probably should not be used in production yet. The API will change in the future.
  • Child elements that changes size after render won't work as expected. The component needs access to the height of each element to properly align elements. Images without a defined size will for instance break.
  • It does not do things in "the react way" - styles are set explicitly on child elements through the browsers DOM API, which is bad.

License

Licensed under the MIT License, see LICENSE

You can’t perform that action at this time.