React MUI Avatar Component

React MUI is a UI library providing predefined robust and customizable components for React for easier web development. Material-UI 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 are going to discuss the React MUI Avatar Display. Avatars are used to denote letters, icons, and images in different shapes and background colors.

Types of Avatar:

• Image Avatar: It is used to denote an image as the avatar’s content.
• Letter Avatar: It is used to denote characters as the avatar’s content.
• Icon Avatar: It is used to denote the icon as the avatar’s content.
• Avatar Size: It is used to denote the height and width of the avatar.
• Avatar Variant: It is used to denote different avatar variants.
• Avatar Group: It is used to group different avatars for users to interact with.
• Fallback Avatar: When an image fails to load, alternative text or icon is used as the avatar’s content. 
• Badge Avatar: It is used to add the badge to the avatar’s content.

Approach: Let us create a React project and install React MUI module. Then we will create a UI that will showcase React MUI Avatar Component. 

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.

Project Structure

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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
                <Avatar variant="square"
                    sx={{ width: 60, height: 60 }} src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
            </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:

Example 2: 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 AvatarGroup from '@mui/material/AvatarGroup';
export default function Demo() {
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>

            <h3><u>React MUI Avatar Display</u></h3>

            <AvatarGroup total={10}
                max={5} sx={{ maxWidth: "200px" }}
                spacing="medium">
                <Avatar sx={{ bgcolor: "red" }}>
                    #
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    G
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    F
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    G
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

Output:

Reference: https://mui.com/material-ui/react-avatar/