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

by
Tiempo de lectura: 2 minutos

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

Returns only the HTML translated, without any added.

// 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<ArticleListProps> = ({ }) => {
 
 return (
    <Box sx={{ width: 500, minHeight: 393 }}>
      <Masonry columns={4} spacing={2}>
        {heights.map((height, index) => (
          <Item key={index} sx={{ height }}>
            {index + 1}
          </Item>
        ))}
      </Masonry>
    </Box>
    
  );
};

export default MasonryList;

Use:

<MasonryList />

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).

Post Views: 4

Leave a Comment