react-layouts

React UI Layout Library

Docs - http://bhargav175.github.io/react-layouts/

Create Flexboxes easily using Flexbox and FlexItem elements which bring inline styles into play and expose a style prop to customize.

Installation

npm install react-layouts

Usage

import Layouts from 'react-layouts/lib/index';
let {FlexBox, FlexItem} from Layouts;

Props

FlexBox

1. flexDirection
2. flexWrap
3. style

FlexItem

1. style

Examples

Flex type = Row

<FlexBox  flexDirection='row' flexWrap='nowrap' style={{
			     	height:'100px',
			     	backgroundColor:colors.greyLight,
			     	padding: '50px'
			     }} >
			<FlexItem flexVal='5' style={{ background :  colors.blue }}/>
			<FlexItem flexVal='6' style={{ background :  colors.indigo }}/>
			<FlexItem  style={{ background :  colors.teal }}/>
	 </FlexBox>;

Flex type = Column

<FlexBox style={{
			     	marginTop:'10px',
			     	height:400
			     }} flexDirection='column' >
			<FlexItem style={{ background :  colors.orange}}/>
			<FlexItem style={{ background :  colors.pink }}/>
			<FlexItem style={{ background :  colors.yellow }}/>
	</FlexBox>;

Flex type = nested

<FlexBox style={{
			     	marginTop:'10px',
			     	height:400
			     }} flexDirection='row'>
		 	<FlexItem >

		      <FlexBox style={{
						     	height:400
						     }}  flexDirection ='column' >
						<FlexItem style={{ background :  colors.indigo}}/>
						<FlexItem style={{ background :  colors.greyLight }}/>
						<FlexItem style={{ background :  colors.lightBlue }}/>
					</FlexBox>

			</FlexItem>
  	<FlexItem style={{ background :  colors.orange}}/>
	   	<FlexItem style={{ background :  colors.yellow }}/>
  </FlexBox>;