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

Demo

http://kyleamathews.github.io/react-image-grid/