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