React MUI Data Display Components
React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.
Data Display Components provide a convenient and consistent way to display data and information in your Material-UI-based applications.
MUI provides various types of Data Display components:
Components
|
Description
|
Avatar |
This component allows you to display a user’s profile image or icon in a circular or square format. |
Badge |
This component is a small, circular component that is used to display a notification count or status indicator. |
Chip |
This component provides a compact and clickable element for displaying small pieces of information, such as tags, labels, or contact information. |
Divider |
This component is a horizontal line used to separate content into distinct sections. Dividers can be used to create visual breaks in content. |
Icons |
MUI provides a wide range of icons that can be used in your applications. |
Material icons |
Material Icons are a set of icons created by Google, designed to be used in Material Design applications. |
List |
This component allows you to display a list of items, each with a specific detail or action. |
Table |
This component allows you to display tabular data in a grid format, with optional sorting, pagination, and selection capabilities. |
Tooltip |
This component provides a way to display additional information or context when the user hovers over an element. |
Typography |
This component provides a collection of text styles that can be used to display headings, body text, and other types of content. |
Creating React Project:
Step 1: To create a react app, you need to install react modules through npx command.
npx 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: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new component user makes or the code changes, we will be performing will be done in the source folder.
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Example 1: We are creating a UI that shows React MUI Avatar Data Display component.
Filename: App.js
Javascript
import * as React from 'react' ;
import Avatar from '@mui/material/Avatar' ;
import BuildIcon from '@mui/icons-material/Build' ;
import WifiIcon from '@mui/icons-material/Wifi' ;
import CreateIcon from '@mui/icons-material/Create' ;
import { Stack } from '@mui/material' ;
export default function Demo() {
return (
<div style={{ margin: 100 }}>
<h1 style={{ color: 'green' }}>
GeeksforGeeks
</h1>
<h3><u>React MUI Avatar Display</u></h3>
Image Avatar:<br /><br />
<Stack direction= "row" spacing={2}>
<Avatar sx={{ width: 60, height: 60 }} src=
<Avatar variant= "square"
sx={{ width: 60, height: 60 }} src=
</Stack>
<br />Icon Avatar:<br /><br />
<Stack direction= "row" spacing={2}>
<Avatar
sx={{
bgcolor: "green" ,
width: 40,
height: 40
}}>
<BuildIcon />
</Avatar>
<Avatar variant= "square"
sx={{
bgcolor: "green" ,
width: 50,
height: 50
}}>
<CreateIcon />
</Avatar>
<Avatar
sx={{
bgcolor: "green" ,
width: 60,
height: 60
}}>
<WifiIcon />
</Avatar>
</Stack>
</div>
);
}
|
Output:
Last Updated :
14 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...