react-stack

#React Stack Simple and intuitive flex-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';

ReactDOM.render(
  <HorizontalStack>
    <div />
    <div />
    <VerticalStack>
      <div />
      <div />
      <div />
    </VerticalStack>
  </HorizontalStack>,
  document.getElementById('app')
);

#####ES5

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="https://npmcdn.com/react@^0.14/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@^0.14/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-stack"></script>

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

• justifyContent: flex-start (default), flex-end, center, space-between, space-around
• alignItems: flex-start, flex-end, center, baseline, stretch (default)
• alignContent: flex-start, flex-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)

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

npm install
npm run build
npm start

###Codepen example