0.0.2 • Published 7 years ago
react-column-wrap v0.0.2
React Column Wrap
A React component that renders its children in a column layout that supports wrapping.
It aims to achieve the layout behaviour that should be supported by flex box (flex-direction: column; flex-wrap: wrap;) but which is not implemented properly in any major browser.
Install
npm install react-column-wrap
ColumnLayout Component
Positions its children in a column layout.
Features
- Supports child items of any (including undefined) sizes.
- Updates when child item size changes (reorganising children and collapsing to a single column where possible).
- Creates columns of equal width based on the widest item.
Limitations
- First pass render looks ugly.
- Currently requires a fixed column height to be specified rather than calculating this from the containing element.
See the demo
Props
columnHeight
: PropTypes.number
Height in pixels of the container element. Items will be wrapped onto the next column where necessary.
children
: PropTypes.node
The items to layout. Can be of mixed / undefined sizes as react-measure is used to calculate the size of each item.
Example
import { ColumnWrap } from 'react-column-wrap'
<ColumnWrap columnHeight={1000}>
<Item />
<Item />
<Item />
<Item />
</ColumnWrap>