React-component-gallery NPM

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.

screen shot 2014-10-27 at 10 19 40 am

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.