React component for creating an evenly spaced gallery of children components
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
test
.gitignore
.npmignore
LICENSE Initial commit Oct 4, 2014
Makefile Update makefile to also compile calculate_layout for dist Feb 9, 2015
README.md Add props to override/set gallery/component styles May 5, 2015
index.html Pretty up example a bit Feb 24, 2015
package.json 1.2.1 Jun 22, 2015
webpack.config.js
webpack.config.production.js Initial commit Oct 6, 2014

README.md

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.