react-component-gallery

React component for creating an evenly spaced gallery of child components.

These components can be anything from text, images, a card UI, etc.

You choose a targetWidth, margin, and widthHeightRatio for your components and then this component does the math to figure out how to size each component. Listens for when its width changes and re-renders.

Install

npm install react-component-gallery

Demo

http://kyleamathews.github.io/react-component-gallery/

Usage

  <ComponentGallery
    className="photos"
    margin=10
    widthHeightRatio=3/5
    targetWidth=250>
      <img src="https://example.com/pic1.jpg" />
      <img src="https://example.com/pic2.jpg" />
      <img src="https://example.com/pic3.jpg" />
      <img src="https://example.com/pic4.jpg" />
      <img src="https://example.com/pic5.jpg" />
      <img src="https://example.com/pic6.jpg" />
  </ComponentGallery>

If you'll be rendering this component on the server, you'll also want to pass in a initialComponentWidth prop so the component has a width to calculate against. Otherwise the component will return an empty <div />. For example, if you're rendering for a mobile screen, do something like initialComponentWidth=375

Props

Prop	Description
children	Any valid react component
disableServerRender	Renders a empty on the server
margin	Set the right and bottom margin for each component. You can set the marginBottom separately if desired.
noMarginBottomOnLastRow	Set marginBottom to 0 for components on the last row. Simplifies styling gallery as a whole.
marginBottom	Set marginBottom (in pixels) separate from marginRight
targetWidth	Desired width for each component. Used when calculating the gallery layout.
widthHeightRatio	Defaults to 1 but useful if components don't fit well in a square.
galleryStyle	Override/set inline styles for the gallery div.
componentStyle	Override/set inline styles for each component div.