Skip to content
master
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

React component for creating an evenly spaced gallery of children components

Resources

License

Packages

No packages published