In this tutorial, we will see how to create image list in react with material ui (mui 5). We will see image gallery, image list with title bar example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
React Material UI 5 Image List Example
1. Create react mui 5 standard gallery image list using react-mui ImageList, ImageListItem component.
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
export default function StandardImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
];
react mui 5 gallery image list
2. react mui 5 quilted image list.
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
function srcset(image: string, size: number, rows = 1, cols = 1) {
return {
src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
srcSet: `${image}?w=${size * cols}&h=${
size * rows
}&fit=crop&auto=format&dpr=2 2x`,
};
}
export default function QuiltedImageList() {
return (
<ImageList
sx={{ width: 500, height: 450 }}
variant="quilted"
cols={4}
rowHeight={121}
>
{itemData.map((item) => (
<ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
<img
{...srcset(item.img, 121, item.rows, item.cols)}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
title: 'Breakfast',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
title: 'Burger',
},
{
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
title: 'Camera',
},
{
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
title: 'Coffee',
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
title: 'Hats',
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
title: 'Honey',
author: '@arwinneil',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
title: 'Basketball',
},
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
title: 'Tomato basil',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
},
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
cols: 2,
},
];
3. react mui 5 Woven image list. Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content.
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
export default function WovenImageList() {
return (
<ImageList
sx={{ width: 500, height: 450 }}
variant="woven"
cols={3}
gap={8}
>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={`${item.img}?w=161&fit=crop&auto=format`}
srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: "https://images.unsplash.com/photo-1549388604-817d15aa0110",
title: "Bed",
},
{
img: "https://images.unsplash.com/photo-1563298723-dcfebaa392e3",
title: "Kitchen",
},
{
img: "https://images.unsplash.com/photo-1523413651479-597eb2da0ad6",
title: "Sink",
},
{
img: "https://images.unsplash.com/photo-1525097487452-6278ff080c31",
title: "Books",
},
{
img: "https://images.unsplash.com/photo-1574180045827-681f8a1a9622",
title: "Chairs",
},
{
img: "https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62",
title: "Candle",
},
{
img: "https://images.unsplash.com/photo-1530731141654-5993c3016c77",
title: "Laptop",
},
{
img: "https://images.unsplash.com/photo-1481277542470-605612bd2d61",
title: "Doors",
},
{
img: "https://images.unsplash.com/photo-1517487881594-2787fef5ebf7",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee",
title: "Storage",
},
{
img: "https://images.unsplash.com/photo-1519710164239-da123dc03ef4",
title: "Coffee table",
},
{
img: "https://images.unsplash.com/photo-1588436706487-9d55d73a39e3",
title: "Blinds",
},
];
mui 5 gallery image
4. react mui 5 Masonry image list.
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import { Box } from "@mui/material";
export default function MasonryImageList() {
return (
<Box sx={{ width: 500, height: 450, overflowY: "scroll" }}>
<ImageList variant="masonry" cols={3} gap={8}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={`${item.img}?w=248&fit=crop&auto=format`}
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</Box>
);
}
const itemData = [
{
img: "https://images.unsplash.com/photo-1549388604-817d15aa0110",
title: "Bed",
},
{
img: "https://images.unsplash.com/photo-1525097487452-6278ff080c31",
title: "Books",
},
{
img: "https://images.unsplash.com/photo-1523413651479-597eb2da0ad6",
title: "Sink",
},
{
img: "https://images.unsplash.com/photo-1563298723-dcfebaa392e3",
title: "Kitchen",
},
{
img: "https://images.unsplash.com/photo-1588436706487-9d55d73a39e3",
title: "Blinds",
},
{
img: "https://images.unsplash.com/photo-1574180045827-681f8a1a9622",
title: "Chairs",
},
{
img: "https://images.unsplash.com/photo-1530731141654-5993c3016c77",
title: "Laptop",
},
{
img: "https://images.unsplash.com/photo-1481277542470-605612bd2d61",
title: "Doors",
},
{
img: "https://images.unsplash.com/photo-1517487881594-2787fef5ebf7",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee",
title: "Storage",
},
{
img: "https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62",
title: "Candle",
},
{
img: "https://images.unsplash.com/photo-1519710164239-da123dc03ef4",
title: "Coffee table",
},
];
5. react mui 5 image list with title bar and author name.
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
import ListSubheader from "@mui/material/ListSubheader";
import IconButton from "@mui/material/IconButton";
import InfoIcon from "@mui/icons-material/Info";
export default function TitlebarImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }}>
<ImageListItem key="Subheader" cols={2}>
<ListSubheader component="div">December</ListSubheader>
</ImageListItem>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={`${item.img}?w=248&fit=crop&auto=format`}
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
<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>
}
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
author: "@bkristastucchio",
rows: 2,
cols: 2,
featured: true,
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
author: "@rollelflex_graphy726",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
author: "@helloimnik",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
author: "@nolanissac",
cols: 2,
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
author: "@hjrc33",
cols: 2,
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
author: "@arwinneil",
rows: 2,
cols: 2,
featured: true,
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
author: "@tjdragotta",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
author: "@katie_wasserman",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
author: "@silverdalex",
rows: 2,
cols: 2,
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
author: "@shelleypauls",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
author: "@peterlaster",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
author: "@southside_customs",
cols: 2,
},
];
mui 5 gallery image list with title bar
6. react mui 5 image list with title bar below image (standard).
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
export default function TitlebarBelowImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={`${item.img}?w=248&fit=crop&auto=format`}
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
title={item.title}
subtitle={<span>by: {item.author}</span>}
position="below"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
author: "@bkristastucchio",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
author: "@rollelflex_graphy726",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
author: "@helloimnik",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
author: "@nolanissac",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
author: "@hjrc33",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
author: "@arwinneil",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
author: "@tjdragotta",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
author: "@katie_wasserman",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
author: "@silverdalex",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
author: "@shelleypauls",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
author: "@peterlaster",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
author: "@southside_customs",
},
];
7. react mui 5 custom grid like image list.
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
import IconButton from "@mui/material/IconButton";
import StarBorderIcon from "@mui/icons-material/StarBorder";
function srcset(
image: string,
width: number,
height: number,
rows = 1,
cols = 1
) {
return {
src: `${image}?w=${width * cols}&h=${height * rows}&fit=crop&auto=format`,
srcSet: `${image}?w=${width * cols}&h=${
height * rows
}&fit=crop&auto=format&dpr=2 2x`,
};
}
export default function CustomImageList() {
return (
<ImageList
sx={{
width: 500,
height: 450,
// Promote the list into its own layer in Chrome. This costs memory, but helps keeping high FPS.
transform: "translateZ(0)",
}}
rowHeight={200}
gap={1}
>
{itemData.map((item) => {
const cols = item.featured ? 2 : 1;
const rows = item.featured ? 2 : 1;
return (
<ImageListItem key={item.img} cols={cols} rows={rows}>
<img
{...srcset(item.img, 250, 200, rows, cols)}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
sx={{
background:
"linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, " +
"rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)",
}}
title={item.title}
position="top"
actionIcon={
<IconButton
sx={{ color: "white" }}
aria-label={`star ${item.title}`}
>
<StarBorderIcon />
</IconButton>
}
actionPosition="left"
/>
</ImageListItem>
);
})}
</ImageList>
);
}
const itemData = [
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
author: "@bkristastucchio",
featured: true,
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
author: "@rollelflex_graphy726",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
author: "@helloimnik",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
author: "@nolanissac",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
author: "@hjrc33",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
author: "@arwinneil",
featured: true,
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
author: "@tjdragotta",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
author: "@katie_wasserman",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
author: "@silverdalex",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
author: "@shelleypauls",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
author: "@peterlaster",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
author: "@southside_customs",
},
];
Related Posts
create a chat ui in react with mui 5
create a blog section in react mui 5
create a footer in react mui 5
create a responsive navbar in react with mui 5
react mui 5 search bar example
react mui 5 login page example
react mui 5 image list example
react mui 5 toggle switch example
react mui 5 registration form example
react mui 5 contact us page example
react mui 5 loading skeleton example
react mui 5 gradient button example
react mui 5 social media icons example
react mui 5 snackbar toast notification example
how to use autocomplete react mui 5
dynamically multiple input fields in react mui 5
how to use dropdown menu in react mui 5
how to use background image in react mui 5
how to use pricing table in react mui 5
how to use dark mode in react mui 5
how to use file upload in react mui 5
how to use sticky navbar in react mui 5
how to use box shadow in react mui 5
how to use multi step form in react mui 5
how to use loading button in react mui 5
