How to use AvatarGroup Component in ReactJS?
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:
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= "w3wiki" 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> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000
Contact Us