Sometimes the best way to display your website’s content is a beautiful image gallery, showcasing the most colorful eye-catching parts to grab the user’s attention. MUI has an API specifically for this, called Image List. This API is easy to understand and use, with easy to customize elements.
The imports of this component are included below. The props and descriptions of each can be found on MUI, as well as demos. True to their names, the imports are for the image container, image items, and description bar for each item. The list and list item imports are necessary, while the item bar is optional.
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
The basic structure of the image gallery can be seen below, and the easiest way to create a large gallery without the need for a huge file is to map an array of images so that the same list item code is repeated for each item. Please go to Mui’s Image List for more demos and customization. The most important styling elements to include are the columns and dimensions. These go under the imagelist tag because they apply to the entire component. Since the APIs are by MUI, the sx prop is a great way to customize each part of your gallery, as it is straightforward and compatible.
export default function ImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={item.img}
srcSet={item.img}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
);
}
Adding an item bar is also very simple and goes directly under the image and inside the list item. You can see the component below, where the bar displays the title, author and an info icon for each image.
<ImageListItemBar
title={item.title}
subtitle={item.author}
actionIcon={
<IconButton
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
aria-label={`info about ${item.title}`}
>
<InfoIcon />
</IconButton>
}
/>
The image list can be easily implemented in any website for a clean, professional showcase of your content. Please go to States N Hooks for other components that you might want to utilize, such as dialog boxes, drawers, carousels and more.
