Neoclassic Placebo Maker
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-stack

1.2.2 • Public • Published

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

install

npm i react-stack

Downloadsweekly downloads

10

version

1.2.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability