The Ultimate Guide to Masonry Layouts in React App

This tutorial will explain how to use the react-responsive-masonry package to create a responsive masonry layout in a React application. Learn how to create stunning masonry layouts that adapt to different screen sizes and resolutions with React.

Creating visually appealing and responsive designs is critical in modern web development. One popular design element is the masonry layout, which is often used on platforms like Pinterest. This grid-like layout can significantly improve the aesthetic appeal of your website, optimizing the vertical use of space by positioning elements based on height.

You can create a masonry layout using pure CSS, however, if you’re using React, you can follow a more streamlined approach.

By utilizing a dedicated library like react-responsive-masonry, you can easily and efficiently construct masonry layouts with features like responsive breakpoints and dynamic height adjustments. The combination of functionality and ease of use makes react-responsive-masonry a powerful tool for enhancing your React applications’ design and UX.

In this article, we’ll demonstrate how to use the react-responsive-masonry package to create a responsive masonry layout in a React application. Whether you’re a seasoned React developer or just starting out, this tutorial should provide you with the knowledge you need to implement this unique layout style. Let’s get started!

Contents:

What is a masonry layout?
Setting up our React project with Create React App
Installing the react-responsive-masonry package
Implementing the masonry layout
Making the layout responsive
Using masonry with React Measure
- Import libraries
- Wrap masonry items with React Measure
- Pass measureRef to the item’s root element
- Dynamically adjust the layout

What is a masonry layout?

A masonry layout is a grid layout based on the masonry or brickwork concept, where items are arranged first vertically and then horizontally according to a grid.

The main characteristic of the masonry layout is that it optimizes space by filling in empty gaps. This is particularly useful for handling elements of different heights. Pinterest is a popular example of this layout, leveraging masonry to display a variety of content in a visually engaging way:

Setting up our React project with Create React App

Let’s start by setting up a new React project. Open your terminal and run the following command:

npx create-react-app masonry-layout

We’ll use Create React App to create a new React app with a single command. Once the command finishes, navigate into the new directory:

cd masonry-layout

Installing the react-responsive-masonry package

To install the react-responsive-masonry package, run the following command in your terminal:

npm install react-responsive-masonry

Implementing the masonry layout

Now that we have our React project set up and the react-responsive-masonry package installed, let’s create a masonry layout. Start by importing the Masonry component from the package in your App.js file:

import React from "react";
import Masonry from "react-responsive-masonry";

We’ll create a simple masonry layout with colored divs. But, in a real-world application, you’d use images, cards, or other components:

import React from "react";
import Masonry from "react-responsive-masonry";

function App() {
  const items = Array.from({ length: 20 }).map((_, index) => (
    <div
      key={index}
      style={{
        height: index % 2 ? "200px" : "250px",
        background: "#" + Math.floor(Math.random() * 16777215).toString(16),
        margin: "10px",
        borderRadius: "8px"
      }}
    />
  ));

  return (
    <div className="App">
      <Masonry columnsCount={3} gutter="10px">
        {items}
      </Masonry>
    </div>
  );
}

In the code above, we generate an array of 20 divs, each with a random color, a height of either 200px or 250px, a margin of 10px, and a border radius of 8px. Then, we pass these items to the Masonry component, which takes two props:

columnsCount: Determines the number of columns in the masonry layout
gutter: Sets the space between the items in the layout

To start your React app and see the masonry layout in action, you can run npm start in your terminal. You should see the following:

Simple Masonry Layout React Demo

Making the layout responsive

While the Masonry component allows for a basic masonry layout, it lacks responsiveness. Here, the ResponsiveMasonry component comes in handy. The real power of react-responsive-masonry is its ability to create responsive layouts, meaning that the number of columns in the layout will change based on the viewport’s width.

The ResponsiveMasonry component accepts the columnsCountBreakPoints prop, where you provide an object that maps the browser width in pixels to the number of columns. The keys in the object are the viewport widths, and the values are the number of columns.

We can modify the previous example to use ResponsiveMasonry as follows:

import React from "react";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

function App() {
  const items = Array.from({ length: 100 }).map((_, index) => (
    <img
      key={index}
      src={`https://picsum.photos/200/${Math.floor(
        Math.random() * (300 - 200 + 1) + 200
      )}`}
      style={{ width: "100%", borderRadius: "8px" }}
    />
  ));
  return (
    <div className="App">
      <ResponsiveMasonry
        columnsCountBreakPoints={{ 300: 2, 500: 3, 700: 4, 900: 5 }}
      >
        <Masonry>{items}</Masonry>
      </ResponsiveMasonry>
    </div>
  );
}

In the code above:

For viewports that are less than 300px wide, there will be two columns
For viewports between 300px and 500px, there will be three columns
For viewports between 500px and 700px, there will be four columns
For viewports that are 900px wide or more, there will be five columns

You can customize these breakpoints based on your specific design requirements. This will look like the following:

Final Custom Masonry Layout Application

Using masonry with React Measure

When working with the masonry layout, you might have items with different heights. You’ll want your layout to adjust to accommodate these different heights and maintain a balanced view. For this, we can combine react-responsive-masonry with React Measure.

The React Measure library allows you to measure the dimensions of a React element, including the element’s width, height, and position relative to the viewport or another element.

Import libraries

First, import both libraries into your component file:

import Masonry from 'react-responsive-masonry';
import Measure from 'react-measure';

Wrap masonry items with React Measure

Next, wrap each of your masonry items with the Measure component:

<Masonry columnsCount={3}>
    {items.map((item, i) => (
        <Measure key={i}>
            {({ measureRef }) => (
                <div ref={measureRef}>
                    {/* content of the item */}
                </div>
            )}
        </Measure>
    ))}
</Masonry>

In this example, items is an array of your masonry items. For each item, we’re creating a Measure component with a unique key. measureRef is a function provided by the Measure component that you can use to measure the dimensions of the wrapped element.

Pass `measureRef` to the item’s root element

The Measure component uses a function as its child, also known as a function as a child component, or FaCC. The FaCC receives an object that contains the measureRef function. In the root element of the item you want to measure, you should pass the measureRef function to the ref prop.

Therefore, React Measure can keep track of the height of each item and re-measure it whenever it changes. When the height of an item changes, it triggers a re-render of the masonry layout, ensuring that the layout stays balanced and responsive.

Dynamically adjust the layout

When React Measure detects a change in an item’s height, it will trigger a re-measure of the item. react-responsive-masonry will then adjust the layout accordingly, ensuring that items are properly aligned and that the overall layout maintains a balanced and aesthetic look.

This combination of react-responsive-masonry and React Measure allows you to create a truly responsive masonry layout that adjusts to different screen sizes and items of different heights. This is particularly useful when dealing with content that can change size dynamically, like images that load at different times or text that changes based on user interaction.

Conclusion

Creating a responsive masonry layout in a React application can significantly enhance your app’s visual appeal and user experience. The flexibility and responsiveness of the masonry layout make it an excellent choice for showcasing diverse and dynamic content.

When combined with other libraries like React Measure, you can further enhance the dynamism of your layouts. By measuring the height of each item and adjusting the layout accordingly, you can create a layout that responds to screen size and the size of the content itself.

Hopefully, this guide has given you a clear understanding of how to leverage these tools to create responsive and dynamic masonry layouts in your React applications. Whether you’re building a photo gallery, a product grid, or a blog post layout, these techniques will help you to deliver a seamless and visually pleasing user experience.

Source: https://blog.logrocket.com

#react #reactjs