react-image-grid
React component for creating an evenly spaced grid of images.
You choose a targetWidth, margin, and widthHeightRatio for your images and the component does the
math to figure out how to size each image. Re-renders when the component
width changes.
You can pass to the component either a simple array of image urls. Or,
if you'd like an image to link to something, pass an object with src
and link fields. See the example usage below.
Install
npm install react-image-grid
Usage
<ImageGrid
className="photos"
margin=10
widthHeightRatio=3/5
targetWidth=250
images={[
"https://example.com/pic1.jpg",
{
src: "https://example.com/pic2.jpg",
link: "https://example.com/pic2.jpg"
},
"https://example.com/pic3.jpg",
"https://example.com/pic4.jpg",
"https://example.com/pic5.jpg",
"https://example.com/pic6.jpg"
{
src: "https://example.com/pic7.jpg",
link: "https://google.com"
},
]} />
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 your rendering for a mobile screen, do something like
initialComponentWidth=375