Implementing a Masonry List (unordered list) with React and MUI

Today we’re going to learn how to create a Pinterest-style list (Masonry List) using React with the MUI library.

An unordered list like Pinterest’s allows us to see all the elements on the screen in a list format. In this example, we’ll create Material Design cards.

First, we need to install the MUI lab library:

npm install @mui/lab @mui/material --save

Once installed, let’s create a component called MasonryList.tsx

// components/ArticleList.tsx
import React from 'react';
import { Box, styled } from '@mui/material';
import Masonry from '@mui/lab/Masonry';
import Paper from '@mui/material/Paper';

const heights = [200, 100, 40, 24, 233, 33, 59, 400, 150, 290, 90, 250, 300, 150, 180];

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(0.5),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

const MasonryList: React.FC = ({ }) => {
 return (
    
      
        {heights.map((height, index) => (
          
            {index + 1}
          
        ))}
      
      
  );
};

export default MasonryList;

Once created, we can import it using:

And this is the result:

Now we can customize it with any Item element we create (for example, a Card with images or whatever we want).

DevCodeLight