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.
npm install react-component-gallery
http://kyleamathews.github.io/react-component-gallery/
<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
| 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. |