React MUI AvatarGroup API

React MUI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google. 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 AvatarGroup API. AvatarGroup is used to group different avatars for users to interact with.

Import AvatarGroup  API:

import AvatarGroup from '@mui/material/AvatarGroup'

Props list:

• children: It is used to denote the avatar’s content.
• classes: It is to override or extend the styles applied to the component.
• component: It is used to define the component used for the root node.
• total: It is used to denote the total number of avatars.
• spacing: It is used to denote the spacing of the avatars. 
• max: It is used to denote the maximum number of avatars to show.
• sx: It is used to add custom CSS styles to the avatars.
• variant: It is used to choose different variants of avatars.

CSS Rules:

• root (MuiAvatarGroup-root):  It is the style applied to the root element.
• avatar (MuiAvatarGroup-avatar): It is the style applied to the avatars.

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

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 MUI AvatarGroup API.

• 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 AvatarGroup API</u></h3>
            <AvatarGroup variant="round"
                sx={{ maxWidth: "200px" }}
                spacing="medium">
                <Avatar sx={{ bgcolor: "green" }}>
                    G
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    E
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    E
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    K
                </Avatar>
                <Avatar sx={{ bgcolor: "green" }}>
                    S
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: We are creating a UI that shows MUI AvatarGroup API.

• 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 AvatarGroup API</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: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://mui.com/material-ui/api/avatar-group/