How to use AvatarGroup Component in ReactJS?

Last Updated : 22 Nov, 2023

AvatarGroup Component is used to group multiple Avatars. It renders its children as a stack. Material UI for React has this component available for us, and it is very easy to integrate. We can use the AvatarGroup Component in ReactJS using the following approach.

Prerequisites:

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core
npm install @material-ui/lab

Project Structure:

Project Structure

package.json:

  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
  }

Example: This React component showcases the usage of Material-UI’s AvatarGroup to display a maximum of four avatars, each with a distinct name and picture.

Javascript

import React from "react";
import AvatarGroup from "@material-ui/lab/AvatarGroup";
import Avatar from "@material-ui/core/Avatar";
 
export default function App() {
  return (
    <div style={{ display: "block" }}>
      <h4>How to use AvatarGroup Component in ReactJS?</h4>
      <AvatarGroup max={4}>
        <Avatar alt="Geeksforgeeks" src="YourPicturePath" />
        <Avatar alt="Random Name" src="YourPicturePath" />
        <Avatar alt="Unknow" src="YourPicturePath" />
        <Avatar alt="Gourav" src="YourPicturePath" />
        <Avatar alt="Harrier" src="YourPicturePath" />
      </AvatarGroup>
    </div>
  );
}