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

#react #javascript #webdev #typescript

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.

First, install the package:

npm install react-avatar-group

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"
      }
    ]}
  />
}

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}
  />
}