ReviewSummary
Rating overview with average score and distribution bars for product reviews.
Best for
Import
import { ReviewSummary } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use ReviewSummary near the top of a review section so visitors can quickly understand overall sentiment and the spread of scores.
It is especially useful when the next interaction is either reading reviews or filtering by star rating.
Composition notes
The required inputs are the average score, total count, and the star distribution array. Add onBarClick only when clicking a distribution row has a clear result in the surrounding page.
Behavior and theming guidance
Keep the summary close to the review list it controls or explains. If the bars are interactive, make the follow-up behavior obvious so the visitor knows clicking will filter or jump.
A review summary works best as a quick trust signal, so avoid overloading it with extra promotional messaging.
Examples
Live examples you can edit directly in the sandbox.
Read-only summary
Use the default mode when the component should summarize review sentiment above a review list.
Clickable distribution
Add a click handler when the bars should filter the review list or jump to the matching subset.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| averageRating | number | — | No description yet. |
| totalReviews | number | — | No description yet. |
| distribution | ReviewDistribution[] | — | Distribution from 5 stars to 1 star. Missing entries default to 0. |
| onBarClick | string | — | Called when user clicks a distribution bar (for filtering) |
| className | string | — | No description yet. |