Set of react components to build any layout with ease, mostly based on CSS flexbox.
npm install react-laybox
codepen // TODO
<Row x="center" y="center" grow>
<p>item veritcally centered<p/>
<p>I will be stacked aside each other<p/>
<Row />
API to align inner components differs from CSS flexbox, it is based on left/right/top/bottom rather than flex-start/flex-end. It allows to get get same reference system wether using a or a layout.
Unlike other UI frameworks which provides Grid layout like Bootstrap, Foundation or Semantic-UI you don't need to put in row. A is a container which stacks its children one below the other, as such there is no reason nor need to put it inside a and this prevents adding dummy component in your code and resulting
react-laybox overcomes some of the CSS flexbox limitations such as the impossibility to set max-height of an item in row mode (or max-width in column mode). // TODO
react-laybox allows to build full scaled layout ie. content will be resized based on container with. // TODO
Name | Type | Description | Default Value |
---|---|---|---|
grow | number or bool | flex-grow. 1 is grow={true}, 0 is grow={false}. | 0 |
Name | Type | Description | Default Value |
---|---|---|---|
x | enum 'left', 'center', 'right', 'space', 'stretch' | horizontal aligment of items inside element | 'center' |
y | enum 'top', 'center', 'bottom', 'space', 'stretch' | vertical aligment of items inside element | 'center' |
Name | Type | Description | Default Value |
---|---|---|---|
className | string | pass custom class to resulting div | '' |
style | object | pass custom style to resulting div | {} |
Name | Type | Description | Default Value |
---|---|---|---|
debug | bool | add border and color to div | false |
- React
- Prop Types
- React-container-dimensions