Avatar with Rating

Visually represent user feedback

npm create webcore@latest add AvatarWithRating

Use the AvatarWithRating component to display an avatar group with a star-rating, improving visual representation of user feedback. They help:

• Build trust: By humanizing reviews or feedback by connecting them to real users.
• Enhance clarity: Clearly shows both who gave feedback and their rating.
• Boost credibility: Help users quickly gauge product, service, or content quality.
• Visually engaging: Combines imagery and data in a compact, appealing format.

Preview

★★★★★ 123 developers already enrolled

---
const avatarGroup = [
    '/img/avatar1.png',
    '/img/avatar2.png',
    '/img/avatar3.png',
    '/img/avatar4.png',
    '/img/avatar5.png'
]
---

<AvatarWithRating
    avatar={{ img: avatarGroup }}
    rating={{ score: 5, color: 'var(--w-color-warning)' }}
    text="<b>123 developers</b> already enrolled"
/>

The component uses the API of the Avatar and Rating components. To use the component, you must specify an avatar prop with an img attribute and a rating prop with a score attribute.

Optionally, you can also define a text prop on the component which will render a muted text under the rating. This prop supports HTML and you can use b tags to automatically highlight text within your copy.

Customizing Avatars

Avatars can be customized in a number of different ways to create visually distinct components, such as bordered or different sized avatars:

Increasing sizes

★★★★★ 123 developers already enrolled

Varying sizes

★★★★★ 123 developers already enrolled

<AvatarWithRating
    avatar={{ img: avatarGroup, size: [35, 40, 45, 50, 55] }}
    rating={{ score: 5, color: 'var(--w-color-warning)' }}
    text="<b>123 developers</b> already enrolled"
/>

<AvatarWithRating
    avatar={{ img: avatarGroup, size: [30, 40, 50, 40, 30] }}
    rating={{ score: 5, color: 'var(--w-color-warning)' }}
    text="<b>123 developers</b> already enrolled"
/>

Customizing Rating

The rating can be customized in a similar manner using the shape of a RatingProps object:

Rating with text

★★★★ ★ Rated 4.4/5 123 developers already enrolled

Rating with review link

★★★★★ • 123 reviews 123 developers already enrolled

<AvatarWithRating
    avatar={{ img: avatarGroup }}
    text="<b>123 developers</b> already enrolled"
    rating={{
        score: 4.4,
        color: 'var(--w-color-info)',
        showText: true,
        emptyColor: '#555',
        outline: false,
        text: 'Rated {0}/{1}'
    }}
/>

<AvatarWithRating
    avatar={{ img: avatarGroup }}
    text="<b>123 developers</b> already enrolled"
    rating={{
        score: 5,
        color: 'var(--w-color-success)',
        reviewCount: 123,
        reviewLink: '/reviews'
    }}
/>

Reverse Layout

You can reverse the order of the rating and text props by setting reverse to true:

Reverse layout

★★★★★ 123 developers already enrolled

<AvatarWithRating
    avatar={{ img: avatarGroup }}
    rating={{ score: 5, color: 'var(--w-color-warning)' }}
    text="<b>123 developers</b> already enrolled"
    reverse={true}
/>

API

type AvatarWithRatingProps = {
    avatar: AvatarProps
    rating: RatingProps
    text?: string
    reverse?: boolean
    className?: string
}