Skip to content

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

License

Notifications You must be signed in to change notification settings

Monar/react-styled-box

Repository files navigation

npm version

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published