react-component-gallery
v1.2.1
React component for laying out an evenly spaced gallery of child components
0/weekUpdated 3 years agoMIT
Published by Kyle Mathews
npm install react-component-galleryreact-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-galleryDemo
http://kyleamathews.github.io/react-component-gallery/
Usage
margin=10
widthHeightRatio=3/5
targetWidth=250>
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 likeinitialComponentWidth=375
Props
Prop | Description
---------------------------|----------------children | Any valid react componentdisableServerRender | Renders a empty
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 marginRighttargetWidth | 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.