react-mason is zero-config, zero-dependency masonry HOC.

What’s a masonry grid?

Made popular by Pinterest, a masonry grid displays items stacked compactly (Much like a mason with bricks). Especially useful to display un-structured data (News, photo gallery, posts etc)

Why would I need this?

There are plenty of masonry libraries out there no doubt. So how is this any different? Many of the libraries I found has third-party dependencies (I’m looking at you jQuery). The ones that didn’t, needed me to set fixed columns or had some crazy configuration. So I decided to write a generic HOC (Higher Order Component). No columns, no config!

Demo

Check out the live demo and the repo.

Try it out yourself

It is ridiculously easy to use, just wrap the items in a Masonry component and you’re good to go!

npm install react-mason

import React, { Component } from 'react';

import Masonry from 'react-mason';

import Photo from './Photo';



class PhotoAlbum extends Component {

render() {

return (

<Masonry>

{

this.props.photos.map(photo => <Photo {...photo} />)

}

</Masonry>

)

}

}

That’s all! For more details about how this is made, look behind the scenes (~140 LOC). It is very readable I promise! 🤞

What it has going for it 😍

Computing child placement is fast with a fairly compact grid.

Can layout variable width/height children (No fixed columns!).

Zero config, zero dependencies :)

What it doesn’t 🤷

The layout may not be optimal (it may leave gaps).

No ability to add new children without causing a complete re-layout (yet!)

Zero config :(

Thank you for reading ❤️.