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



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

Shows customer reviews (testimonials) in an auto-playing slider with the customer's avatar, name, text and star rating,
under a "testimonials" heading. Use it on the home page or any landing page to show store or product reviews.
It fetches the reviews from the API (or uses your own JSON) and renders nothing at all when there are no reviews.
`source-value` must be a JSON string for the `products`, `categories` and `json` sources.

## Use it [#use-it]

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

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

**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 { SallaReviews } from '@salla.sa/twilight-components-react/reviews';

export function Example() {
  return (
    <SallaReviews source="products" sourceValue="[123456, 789012]" type="products" sort="top_rating" limit={6} displayAllLink />
  );
}
```

```html
<salla-reviews source="products" source-value="[123456, 789012]" type="products" sort="top_rating" limit="6" display-all-link></salla-reviews>
```

## Properties [#properties]

| Property           | Attribute            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Type                                   | Default    |
| ------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ---------- |
| `displayAllLink`   | `display-all-link`   | Controls the visibility of a link to the reviews page. When set to `true`, a link to the store's testimonials page is shown next to the heading.                                                                                                                                                                                                                                                                                                                            | `boolean`                              |            |
| `hideCustomerInfo` | `hide-customer-info` | Asks the API to leave out customer information when fetching reviews (sent as `hide_customer_info`). When set to true, customer information will be hidden. Defaults to false, meaning customer information will be displayed.                                                                                                                                                                                                                                              | `boolean`                              | `false`    |
| `limit`            | `limit`              | Defines the maximum number of reviews to retrieve from the API (a count). Not applied when `source` is `json`.                                                                                                                                                                                                                                                                                                                                                              | `number`                               | `5`        |
| `sort`             | `sort`               | Specifies the sorting criteria for the fetched reviews. Available options: - "top_rating": Sorts reviews based on top ratings. - "random": Sorts reviews randomly. - "latest": Sorts reviews based on the latest ones (default).                                                                                                                                                                                                                                            | `"latest" \| "random" \| "top_rating"` | `"latest"` |
| `source`           | `source`             | Specifies the data source for reviews. Valid options include: - 'categories': Retrieves reviews for specific product categories. - 'products': Retrieves reviews for individual products. - 'json': Uses the reviews from a custom JSON payload provided in `sourceValue`, without calling the API. When using 'json' as the source, a valid payload must be provided in `sourceValue`. If omitted, no source is sent to the API and `sourceValue` is passed through as is. | `"categories" \| "json" \| "products"` |            |
| `sourceValue`      | `source-value`       | Provides data specific to the chosen source. Required when using 'categories', 'products', or 'json' as the source: - 'categories': A JSON string of an array of category IDs, for example `"[1, 2]"`. - 'products': A JSON string of an array of product IDs, for example `"[123456]"`. - 'json': A JSON string of an object `{ "data": [ { "name", "content", "stars", "avatar" } ] }`, where `stars` is a number of stars for `salla-rating-stars`.                      | `number[] \| object \| string`         |            |
| `type`             | `type`               | Specifies the type of reviews to fetch. Available options: - "all": Fetches reviews from all sources. - "store": Fetches reviews specific to the store. - "products": Fetches reviews specific to products.                                                                                                                                                                                                                                                                 | `"all" \| "products" \| "store"`       | `"store"`  |

## Related [#related]

Renders: [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars).