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
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
<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
For example, if you're rendering for a mobile screen, do something like
||Any valid react component|
||Renders a empty
on the server
||Set the right and bottom margin for each component. You can set the marginBottom separately if desired.|
||Set marginBottom to 0 for components on the last row. Simplifies styling gallery as a whole.|
||Set marginBottom (in pixels) separate from marginRight|
||Desired width for each component. Used when calculating the gallery layout.|
||Defaults to 1 but useful if components don't fit well in a square.|
||Override/set inline styles for the gallery div.|
||Override/set inline styles for each component div.|