react-laybox v0.1.4
react-laybox
Set of react components to build any layout with ease, mostly based on CSS flexbox.
Install
npm install react-laybox
Demo
codepen // TODO
Usage
<Row x="center" y="center" grow>
<p>item veritcally centered<p/>
<p>I will be stacked aside each other<p/>
<Row />Notes
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 s in the DOM tree.
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
Props
props that applies to self (container)
| Name | Type | Description | Default Value |
|---|---|---|---|
| grow | number or bool | flex-grow. 1 is grow={true}, 0 is grow={false}. | 0 |
props that applies to items (children)
| 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' |
custom styling props
| Name | Type | Description | Default Value |
|---|---|---|---|
| className | string | pass custom class to resulting div | '' |
| style | object | pass custom style to resulting div | {} |
debug props
| Name | Type | Description | Default Value |
|---|---|---|---|
| debug | bool | add border and color to div | false |
Dependencies
- React
- Prop Types
- React-container-dimensions
5 years ago