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.
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.
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