Implementar un Masonry List (lista desordenada) con React y MUI

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo hacer una lista estilo Pinterest (Masonry List) con React la librería MUI.

Una lista desordenada como las de Pinterest, nos permite visualizar en un momento todos los elementos que aparecen en la pantalla en una lista. En este ejemplo vamos a crear cards de Material Design.

Primero tenemos que instalar la librería de MUI lab:

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

Una vez instalada vamos a crear un componente llamado 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<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;

Una vez creado, podremos importarlo usando:

      <MasonryList />

Y este es el resultado:

Ahora podremos customizarlo con cualquier elemento Item que creemos nosotros (por ejemplo una Card con imágenes o lo que queramos).