node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

react-stack

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'; 
 
ReactDOM.render(
  <Horizontal>
    <div>1</div>
    <div>2</div>
    <Vertical alignItems={'center'}>
      <div>3</div>
      <Horizontal grow={1}>
        <div align={'end'}>4</div>
        <div align={'center'}>5</div>
        <div align={'end'} basis={30}>6</div>
      </Horizontal>
    </Vertical>
  </Horizontal>,
  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: 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

http://codepen.io/aush/pen/obQvjo