Pinterest like layout components for React.js Pinterest like layout components for React.js.

Table of Contents

Live Demo



You can install the react-stack-grid from npm.

$ npm install react<span class="token operator">-</span>stack<span class="token operator">-</span>grid

Quick Example

Following code is simplest usage.

<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> StackGrid <span class="token keyword">from</span> <span class="token string">"react-stack-grid"</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
Item 1
Item 2
Item 3

    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

width of parent is managed by react-sizeme.


You can set the following properties.

Property Type Default Description
className PropTypes.string undefined Specify className of component.
style PropTypes.object {} Original style of component. Following styles are ignored. (positionheighttransition)
gridRef PropTypes.func null Reference the instance of StackGrid. Unlike ordinary ref, it accepts only functions.
component PropTypes.string "div" See ReactTransitionGroup
itemComponent PropTypes.string "span" Specify the component of the grid item.
columnWidth PropTypes.oneOfType([PropTypes.number, PropTypes.string]) 150 Specify column width as an number(px), or percentage string. (Example "33.33%")
gutterWidth PropTypes.number 5 Specify gutter width as an number.
gutterHeight PropTypes.number 5 Specify gutter height as an number.
duration PropTypes.number 480 Specify duration of animation in ms.
easing PropTypes.string easings.quartOut Specify a css valid transition-timing-function string. It can be easily specification by using easings.
appearDelay PropTypes.number 30 Specify delay of the initial animation in ms.
appear PropTypes.func fadeUp.appear See Animations section.
appeared PropTypes.func fadeUp.appear
enter PropTypes.func fadeUp.appear
entered PropTypes.func fadeUp.appear
leaved PropTypes.func fadeUp.appear
units PropTypes.func { length: "px", angle: "deg" }
monitorImagesLoaded PropTypes.bool false If set to true, images reading is monitored. use imagesloaded.
vendorPrefix PropTypes.bool false If set to true, add a vendor prefix to styles add dynamically.
userAgent PropTypes.string undefined Specify userAgent for determinig the vendor prefix. See inline-style-prefixer.
enableSSR PropTypes.bool false Render component on the server side. More info.
onLayout PropTypes.func null It is called at the timing when the layout is confirmed, or at the updated timing. (Called only by client.)
horizontal PropTypes.bool false The transposed (horizontal) order of drawing elements. Retains the original order of the items.
rtl PropTypes.bool false When true, items are placed right-to-left instead of the default left-to-right. Useful for RTL languages such as Arabic and Hebrew.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.