Open In App

React MUI Image List Layout

Improve
Improve
Like Article
Like
Save
Share
Report

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Image list layout. The Image List is used for displaying a collection of images in an organized grid layout. Not only this, but an image list also improves the visual content.

Image list Layout Variants:

  • Standard image list: A standard image list contains a uniform container size, ratio, and spacing and is mostly used when the items are of equal importance.
  • Quilted image list: A quilted image list emphasize certain items over others in an image collection by creating a hierarchy using varied container sizes & ratios.
  • Woven image list: A woven image list is used to create a rhythmic layout by using alternating container ratios.
  • Masonry image list: A masonry image list creates the layout with a dynamically sized container height which reflects the aspect ratio of each image. It is mainly used when the image is displayed non-cropped.
  • Image list with title bars: It creates an overlay consisting of a title, subtitle, and secondary action.
  • Custom image list: The custom images list is also created like a custom titlebar, more/less gap, custom position of secondary action, etc.
  • API: The APIs are:
    • <ImageList />
    • <ImageListItem />
    • <ImageListItemBar />

 

Syntax:

<ImageList cols={...} rowHeight={...}>
    ...
</ImageList>

Creating React Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

 

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI standard image list.

Javascript




import * as React from "react";
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
  
const data = [
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
  
]
  
function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Image list</h2>
            </div>
            <div>
                <ImageList sx={{ width: 500, height: 500 }} 
                    cols={3} rowHeight={170}>
                    {data.map((idx) => (
                        <ImageListItem key={idx.link} >
                            <img
                                src={`${idx.link}?w=
                                164&h=164&fit=crop&auto=format`}
                                srcSet={`${idx.link}?w=
                                164&h=164&fit=crop&auto=format&dpr=2 2x`}
                            />
                        </ImageListItem>
                    ))}
                </ImageList>
            </div>
        </center>
    );
}
  
export default App;


Output:

 

Example 2: Below example demonstrates the React MUI woven image list.

Javascript




import * as React from "react";
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
  
const data = [
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
    {
        link: 
    },
  
]
  
function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Image list</h2>
            </div>
            <div>
                <ImageList sx={{ width: 500, height: 500 }} 
                    variant="woven" cols={3} gap={8}>
                    {data.map((idx) => (
                        <ImageListItem key={idx.link} >
                            <img
                                src={`${idx.link}?w=
                                164&h=164&fit=crop&auto=format`}
                                srcSet={`${idx.link}?w=
                                164&h=164&fit=crop&auto=format&dpr=2 2x`}
                            />
                        </ImageListItem>
                    ))}
                </ImageList>
            </div>
        </center>
    );
}
  
export default App;


Output:

 

Reference: https://mui.com/material-ui/react-image-list



Last Updated : 16 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads