Monar / react-styled-box

Styled component that speedup prototyping layouts with ready flex powered Box.

react-styled-box

What is it ?

This is a simple styled.div component, that makes your basic positioning of elements faster. Instead of writing all of the "styled" components upfront you can prototype the layout faster with this ready <Box>.

How it works ?

import Box from 'react-styled-box';

<Box flexDirection="column">
  <Box flexDirection="row">
    <span> header </span>
    <span> header 2 </span>
  </Box>

  <Box flexGrow={1}>
    <Box margin={10} padding="10px 0 0 0">
      Item one
    </Box>
    <Box margin={10} padding="10px 0 0 0">
      Item two
    </Box>
  </Box>
</Box>

What does it support ?

Check A Complete Guide to FlexBox

propType	valid types	sample values	description
display	string	'flex', 'block'	flex - default value
margin	integer, string	10, '50%'	number values are suffixed with px
padding	integer, string	10, '50%'	number values are suffixed with px
width	integer, string	10, '50%'	number values are suffixed with px
maxWidth	integer, string	10, '50%'	number values are suffixed with px
minWidth	integer, string	10, '50%'	number values are suffixed with px
height	integer, string	10, '50%'	number values are suffixed with px
maxHeight	integer, string	10, '50%'	number values are suffixed with px
minHeight	integer, string	10, '50%'	number values are suffixed with px
flexDirection	string	'row', 'column'
flexWrap	string	'nowrap', 'wrap'
flexFlow	string	'column nowrap', 'row wrap'
justifyContent	string	'flex-start', 'center'
alignItems	string	'base-line', 'flex-start'
alignContent	string	'flex-start', 'space-around'
order	integer	1, 2
flexGrow	integer	1, 2
flexShrink	integer	1, 0
flexBasis	integer, string	30, 'auto', '30%'	number values are suffixed with px
flex	string	'0 1 auto', '1 0'
alignSelf	string	'auto', 'flex-start'
overflow	string	visible, hidden
overflowX	string	visible, hidden
overflowY	string	visible, hidden