# salla-reviews-summary (https://docs.salla.dev/twilight/react/web-components/salla-reviews-summary)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Rating summary for a product: the average rating, the review count, a bar per star level (5 to 1) with its percentage,
the review factor tags and the "recommended" percentage. Use it above the product reviews list.

What is shown follows the store rating settings: if both `show_rating_summary` and `show_recommendation` are off, or the
product has no reviews, nothing is rendered. If only recommendation is on, only the recommended percentage is shown.
The data is loaded from the store API, so there is no need to pass ratings in.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-reviews-summary>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaReviewsSummary } from '@salla.sa/twilight-components-react/reviews-summary';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaReviewsSummary } from '@salla.sa/twilight-components-react/reviews-summary';

export function Example() {
  return (
    <SallaReviewsSummary itemId={123456} />
  );
}
```

```html
<salla-reviews-summary item-id="123456"></salla-reviews-summary>
```

## Properties [#properties]

| Property            | Attribute | Description                                                                                                     | Type     | Default |
| ------------------- | --------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `itemId` (required) | `item-id` | The ID of the product to load the summary for. Required: without it an error is logged and nothing is rendered. | `number` |         |

## Related [#related]

Renders: [`<salla-progress-bar>`](https://docs.salla.dev/twilight/react/web-components/salla-progress-bar), [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars), [`<salla-review-factors-tags>`](https://docs.salla.dev/twilight/react/web-components/salla-review-factors-tags).

Used inside: [`<salla-comments>`](https://docs.salla.dev/twilight/react/web-components/salla-comments).