DEV Community

Cover image for react-avatar-group: A responsive, automatically-generated group avatar component, powered by ui-avatars.
Michael Bagley
Michael Bagley

Posted on

react-avatar-group: A responsive, automatically-generated group avatar component, powered by ui-avatars.

This library is great for displaying the 'active' users of your React application. The responsiveness of react-avatar-group is meant to be similar to the Google Docs user icons. Some live examples are available here.

If you need a more in-depth tutorial on using this package with actual, live users, check out this post here. Otherwise, here's a quick walk-through on how to use this package.

react avatar group react-avatar-group

First, install the package:

npm install react-avatar-group
Enter fullscreen mode Exit fullscreen mode

Then open up your React file and import the package, as follows:

// App.tsx
import AvatarGroup from 'react-avatar-group';

export default function App(){
  <AvatarGroup
    avatars={[
      "James", 
      "Ava", 
      {
        avatar: "Jackson",
        fontColor: "FF00FF",
        tooltip: "This is a custom tooltip"
      }
    ]}
  />
}
Enter fullscreen mode Exit fullscreen mode

The only required prop to the AvatarGroup component is avatars, which is an array of strings or IAvatar objects, for more customization.

Another important prop is max. This will hide the avatars beyond a certain length with a custom overflow avatar (as seen in the gif above). displayAllOnHover will show all minions passed when the mouse hovers the avatar group, if there is a max number passed.

All the props for react-avatar-group can be seen here.

Using these other props, your AvatarGroup may look like the following:

import AvatarGroup from 'react-avatar-group';

export default function App(){
  <AvatarGroup
    avatars={[
      "James", 
      "Ava", 
      {
        avatar: "Jackson",
        fontColor: "FF00FF",
        tooltip: "This is a custom tooltip"
      }
    ]}
    initialCharacters={1}
    max={3}
    size={60}
    displayAllOnHover
    shadow={2}
  />
}
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
code913 profile image
code913

Looks cool

Collapse
mbagley1020 profile image
Michael Bagley Author

Thanks!