Description:
ReactPinboard is a component for responsive Pinterest-style layouts. Pass in any number of children to see them rendered in equally-weighted, dynamic columns.
Features:
- Accepts any child types. You can even mix and match images, text, and other rich components, to create a pinboard that’s truly customized.
- Child order is preserved. The children will appear in the pinboard in left-to-right, top-to-bottom order. This means that if your children have an obvious numeric order, you don’t need to worry about adjacent children being spread way across from each other.
- Auto-weighted columns. ReactPinboard is economical — it takes up as little vertical space as possible by ensuring that the columns are filled as close to equal-weigh as possible (while maintaining child order).
- Safe for server-rendering. The server can’t measure viewport size, so it assumes a “mobile-first” approach and determines column number from the last value of the
colsarray. The server-render also doesn’t know the rendered child heights for column weighting, so it equally-weights the columns. This is naive, but hopefully close enough to the re-layout on mount that it still feels fast for your end users.
Installation:
$ npm install react-pinboard
Preview:
