Responsive Pinterest-style Layouts For React.js – react-pinboard

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 cols array. 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:

react-pinboard

Download Details:

Author: apartmenttherapy

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/apartmenttherapy/react-pinboard

License: MIT

You Might Be Interested In:

Add Comment