StackedAvatar
Components
StackedAvatar()
StackedAvatar(
props
,context
?):ReactNode
The StackedAvatar component is an UI element that serves a specific use case: to display multiple user avatars stacked together. You often see such stacked avatars used in social media for indicating the number of users who have liked/interacted on a piece of content.
Parameters
Parameter | Type |
---|---|
props | StackedAvatarProps |
context ? | any |
Returns
ReactNode
Example
const userData = [
{
"name": "Alice",
"id": "410490050000320006570034567114572000",
"did": {
"id": "did:pkh:eip155:1:0x003410490050000320006570034567114572000",
"isViewer": true
},
"avatar": {
"src": "https://placebeard.it/360x360",
"width": 360,
"height": 360
},
"createdAt": "2021-03-01T00:00:00.000Z",
"followers": {},
"followersCount": 0
},
{
"name": "Bob",
"id": "410490050000320006570034567114572001",
"did": {
"id": "did:pkh:eip155:1:0x003410490050000320006570034567114572001",
"isViewer": false
},
"avatar": {
"src": "https://placebeard.it/360x360",
"width": 360,
"height": 360
},
"createdAt": "2021-03-01T00:00:00.000Z",
"followers": {},
"followersCount": 0
},
{
"name": "Charlie",
"id": "410490050000320006570034567114572002",
"did": {
"id": "did:pkh:eip155:1:0x003410490050000320006570034567114572002",
"isViewer": true
},
"avatar": {
"src": "https://placebeard.it/360x360",
"width": 360,
"height": 360
},
"createdAt": "2021-03-01T00:00:00.000Z",
"followers": {},
"followersCount": 0
},
{
"name": "Dave",
"id": "410490050000320006570034567114572003",
"did": {
"id": "did:pkh:eip155:1:0x003410490050000320006570034567114572003",
"isViewer": false
},
"avatar": {
"src": "https://placebeard.it/360x360",
"width": 360,
"height": 360
},
"createdAt": "2021-03-01T00:00:00.000Z",
"followers": {},
"followersCount": 0
}
]
<StackedAvatar userData={userData} maxAvatar={4} />
Source
libs/design-system-core/src/components/StackedAvatar/index.tsx:91
Props
StackedAvatarProps
StackedAvatarProps:
object
Type declaration
Member | Type |
---|---|
maxAvatars | number |
size | AvatarSize |
userData | object [] |
Source
libs/design-system-core/src/components/StackedAvatar/index.tsx:7