Ant Design Library has this component pre-built, and it is very easy to integrate as well. Avatar components are used to represent people or objects, and it supports Icons, letters, or images. We can use the following approach in ReactJS to use the Ant Design Avatar Component.
Avatar Props:
- alt: It is used to define the alternative text which describes the image.
- gap: It is the unit distance of letter type between the left and the right sides.
- icon: It is used to define the custom icon type for an icon avatar.
- shape: It is used to indicate the shape of the avatar.
- size: It is used to indicate the size of the avatar.
- src: It is used to pass the address of the image for an image element or avatar.
- srcSet: It is used to define the list of sources to use for different screen resolutions.
- draggable: It is used to indicate whether the picture is allowed to be dragged or not.
- onError: It is a callback function that is triggered when an image load error.
Avatar.Group Props:
- maxCount: It is used to define the maximum avatars to show.
- maxPopoverPlacement: It is used for the placement of excess avatar Popover.
- maxStyle: It is used to define the excess avatar style.
- size: It is used to denote the size of the avatar.
Creating 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 required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'import "antd/dist/antd.css"; import { Avatar } from 'antd'; export default function App() { return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>ReactJS Ant-Design Avatar Component</h4> <Avatar.Group> <Avatar style={{ backgroundColor: 'gray' }}> A </Avatar> <Avatar style={{ backgroundColor: 'blue' }}> B </Avatar> <Avatar style={{ backgroundColor: 'lightblue' }}> C </Avatar> </Avatar.Group> </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/, you will see the following output:
Reference: https://ant.design/components/avatar/
