React MUI ImageListItemBar API

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.

Output:

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

Output:

Reference: https://mui.com/material-ui/api/image-list-item-bar/