Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
umd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

License

Packages

No packages published