Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AvatarGroup improvements

See original GitHub issue


We’d need to enhance the AvatarGroup a bit by truncating its children. By default, we would display a maximum of 4 avatars. If there is an avatars prop passed in with length > 4, the last element is replaced with a circle in the primary color, containing +${avatar.length -3} that invokes whatever the onMoreClick prop tells it to.

Proposed API

  renderTooltip={avatar => <>{}</>}
  onMoreClick={() => doSomething()}

What happens onClick of an Avatar?

Nothing, for now.

What happens onMouseEnter of an Avatar?

We display whatever the renderTooltip says.

What happens onClick of (+5)?

We do whatever onMoreClick says.

Should the list expand?


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

micha-fcommented, Jun 5, 2018

I like it! - that’s what I had in mind 😃

TejasQcommented, Jun 5, 2018

I think hardcoding is flawed by design and ought to be avoided. If we want to provide a good, opinionated set of UI components, I think we ought to provide reasonable defaults with allowing a user to override it to suit whatever his/her use case or design may require.

This would mean avatarCount is a prop that defaults to 3 but can be overridden to whatever the user wants.

How does that sound?

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Avatar] Customize the last avatar in a group #23849 - GitHub
@cngeru You need to target all the Avatars (the +2 is renderered by AvatarGroup):. import React from "react"; import { makeStyles } from ......
Read more >
AvatarGroup API - Material UI - MUI
API reference docs for the React AvatarGroup component. Learn about the props, CSS, and other APIs of this exported module.
Read more >
Vaadin 18 brings enhancements for Fusion and Flow
Read the enhancements for Fusion and Flow included in the release. ... The new Avatar and AvatarGroup components display the user's avatar ...
Read more >
AVATAR Group (@AVATAR_grp) / Twitter
Opportunities for improved CVAD management practices, presented by Dr Amanda Corley. “Do the simple things, and do them well…easier said than done” #ACIPC22....
Read more >
React Avatar Component - PrimeFaces
AvatarGroup. A set of Avatars can be displayed together using the AvatarGroup component. <AvatarGroup> <Avatar label="P" /> <Avatar icon="pi pi-search" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found