React Image Gallery with Masonry.js
Tags: react, html, css, webdev
Published: 2020-11-20 08:24:57

Creating a responsive image gallery like Google Photos on the web has always been a mystery to me, but [Masonry.js] offers a really easy and convenient way to add image galleries to your website whether you are using Vanilla JavaScript or an SPA like React.

**Google Photos**

![google photos][google-photos]

**Masonry**

![masonry example][masonry-example]

Masonry is a JavaScript library for the web. It allows you to create beautiful seamless responsive image galleries. We are using a React implementation [`react-responsive-masonry`][react-responsive-masonry].

It is a very lightweight library that adds to your bundle 1.5KB of minified and gzipped JavaScript.

## React Image Gallery Example

Masonry uses flexbox under the hood which makes it very easy to use and you only need one line of CSS to get it to work.

**Make images fit their container**

```css
img {
  width: 100%;
}
```

**Masonry React component**

```javascript
import Masonry from "react-responsive-masonry"
...
<Masonry columnsCount={3} gutter={4}>
  {images.map((image) => (
    <img src={image} />
  ))}
</Masonry>
```

**CodePen example**

<iframe height="265" style="width: 100%;" scrolling="no" title="React Image Gallery with Masonry.js" src="https://codepen.io/ziad-alzarka/embed/abZrMNo?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/ziad-alzarka/pen/abZrMNo'>React Image Gallery with Masonry.js</a> by Ziad Alzarka
  (<a href='https://codepen.io/ziad-alzarka'>@ziad-alzarka</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Going Responsive

Masonry is designed to be responsive and it is very easy to add breakpoints to the masonry component.

```javascript
const columnsCountBreakPoints = { 350: 1, 750: 2, 900: 3 };

<ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
  <Masonry gutter={4}>
    {images.map((image) => (
      <img src={image} />
    ))}
  </Masonry>
</ResponsiveMasonry>
```

**CodePen example**

<iframe height="265" style="width: 100%;" scrolling="no" title="React Responsive Image Gallery with Masonry.js" src="https://codepen.io/ziad-alzarka/embed/WNxBmyY?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/ziad-alzarka/pen/WNxBmyY'>React Responsive Image Gallery with Masonry.js</a> by Ziad Alzarka
  (<a href='https://codepen.io/ziad-alzarka'>@ziad-alzarka</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

The article was originally published on my blog [here][post].

Feel free to follow me on [Twitter]. Hope I could help!

[google-photos]: https://thetuteur.com/wp-content/uploads/2020/11/google-photos.png "Google photos example"
[masonry-example]: https://raw.githubusercontent.com/xuopled/react-responsive-masonry/HEAD/demo/src/example.gif "Masonry example"
[react-responsive-masonry]: https://www.npmjs.com/package/react-responsive-masonry
[Masonry.js]: https://masonry.desandro.com/
[Twitter]: https://twitter.com/ziad_alzarka
[post]: https://thetuteur.com/react-image-gallery-with-masonry-js