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' }}> neveropen </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:
