React MUI ImageListItemBar API

Last Updated : 15 Sep, 2022

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI ImageListItemBar API. The ImageList displays a collection of images in a structured grid format. ImageListItemBar allows to the placement of an overlay over the images containing some caption. The ImageListItemBar enables to place an overlay over the panel where we can place the action button, title, and subtitle. The API provides a lot of functionality and we will learn to implement them.

Import ImageListItemBar API:

import ImageListItemBar from '@mui/material/ImageListItemBar';
// or
import { ImageListItemBar } from '@mui/material';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

actionIcon: It is used to set an icon button on the component which can be used as a secondary action.
actionPosition: It is used to set the position of the actionIcon. The default value is right.
classes: Override the existing styles or add new styles to the component.
position: It is used to set the position of the title bar. The default position is the bottom.
subtitle: It is used to add a subtitle to the title bar.
title: It is used to set the title to be displayed.

CSS Rules:

root: It is the styles applied to the root element.
positionBottom: It is the styles applied to the root element if the position is bottom.
positionTop: It is the style applied to the root element if the position is top.
positionBelow: It is the styles applied to the root element if the position is below.
titleWrap: It is the styles applied to the title and subtitle container element.
titleWrapBelow: It is the styles applied to the title and subtitle container element if the position is below.
titleWrapActionPosLeft: It is the styles applied to the container element if actionPosition is left.
titleWrapActionPosRight: It is the styles applied to the container element if actionPosition is right.
title: It is the styles applied to the title container element.
subtitle: It is the style applied to the subtitle container element.
actionIcon: It is the styles applied to the actionIcon if supplied.
actionIconActionPosLeft: It is the styles applied to the actionIcon if actionPositionleft.

Syntax: Create an ImageListItem with ImageListItemBar:

<ImageListItem>
    <img
        src="#"
        loading="lazy"
    />
    <ImageListItemBar title='title' />
</ImageListItem>

Installing and Creating React app and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure: The project Structure should look like the below:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have ImageListItemBar in ImageListItems.

App.js

import "./App.css";
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";

function srcset(image, size, 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`,
    };
}

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ImageListItemBar API</strong>
            </div>
            <br />
            <ImageList
                sx={{ width: 900, height: 300, margin: "auto" }}
                cols={4}
                variant="quilted"
                rowHeight={140}
            >
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks Logo"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={3} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png",
                            121,
                            3,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks New Logo"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
            </ImageList>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have a like button on the title bars.

App.js

import "./App.css";
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
import { ThumbsUpDown, ThumbsUpDownRounded } from "@mui/icons-material";
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
import { IconButton } from "@mui/material";

function srcset(image, size, 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`,
    };
}

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ImageListItemBar API</strong>
            </div>
            <br />
            <ImageList
                sx={{ width: 900, height: 300, margin: "auto" }}
                cols={4}
                variant="quilted"
                rowHeight={140}
            >
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks Logo"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={3} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png",
                            121,
                            3,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks New Logo"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
            </ImageList>
        </div>
    );
}

export default App;