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 |