node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


npm version Build Status Dependency Status devDependency Status Coverage Status MIT licensed

React Stack

Simple and intuitive based layout. ###Install npm install --save react-stack

Don't forget to manually install React^0.14 (peer dependency) if you're using npm@3. ###Use #####ES6

import React from 'react';
import ReactDOM from 'react-dom';
import { VerticalStack, HorizontalStack } from 'react-stack';
// or for brevity import { Vertical, Horizontal } from 'react-stack'; 
    <Vertical alignItems={'center'}>
      <Horizontal grow={1}>
        <div align={'end'}>4</div>
        <div align={'center'}>5</div>
        <div align={'end'} basis={30}>6</div>
var ReactStack = require('react-stack');
var Vertical = ReactStack.Vertical;
var Horizontal = ReactStack.Horizontal;
Good old 1998 Script Tag:

The component depends on React ^0.14 (a introduction of stateless components), so if you're using it without a build step, React ^0.14 must be present as a global.

<script src="^0.14/dist/react.min.js"></script>
<script src="^0.14/dist/react-dom.min.js"></script>
<script src=""></script>


*Stack's and *Wrap's expose standard flex properties:

  • justifyContent: start (default), end, center, space-between, space-around
  • alignItems: start, end, center, baseline, stretch (default)
  • alignContent: start, end, center, space-between, space-around, stretch (default)

Lower lever Stack and Wrap add:

  • orientation: horizontal (default), vertical

Even lower Flex add:

  • wrap: true, false (default)

For children components:

  • grow: Number (default: 0)
  • shrink: Number (default: 1)
  • basis: Number, auto (default)
  • align: start, end, center, baseline, stretch, auto (default)

Also check tests. ###Demo Navigate to the 'demo' folder and execute

npm install
npm run build
npm start

Codepen example