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



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

Lists the comments or reviews for a page, product or blog post, with a sort dropdown, a "load more" button and, unless hidden, a form to add a comment.
Use it on product, page or blog templates to show customer feedback. Set `testimonials` to show store reviews instead.

The sort dropdown is a native `select` with a label. On product pages it also renders a reviews summary.

## Use it [#use-it]

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

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

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

export function Example() {
  return (
    <SallaComments type="product" itemId={123456} />
  );
}
```

```html
<salla-comments type="product" item-id="123456"></salla-comments>
```

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

export function Example() {
  return (
    <SallaComments testimonials />
  );
}
```

```html
<salla-comments testimonials="true"></salla-comments>
```

## Properties [#properties]

| Property            | Attribute          | Description                                                                                                                                                                                                             | Type                                                          | Default            |
| ------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------ |
| `blockTitle`        | `block-title`      | Custom heading shown above the list instead of the default "Overall rating". It only shows when there is at least one comment and `hideTitle` is false.                                                                 | `string`                                                      |                    |
| `hideBought`        | `hide-bought`      | Hides the "bought" indicator on each comment (passed to every comment item as `hideBought`).                                                                                                                            | `boolean`                                                     | `false`            |
| `hideForm`          | `hide-form`        | Hides the form used to add a comment. It is always hidden when `testimonials` is true.                                                                                                                                  | `boolean`                                                     |                    |
| `hideTitle`         | `hide-title`       | Hides the heading above the list. It is always hidden when `testimonials` is true.                                                                                                                                      | `boolean`                                                     |                    |
| `itemId` (required) | `item-id`          | ID of the page, product or blog post the comments belong to. Not used when `testimonials` is true.                                                                                                                      | `number`                                                      |                    |
| `loadMoreText`      | `load-more-text`   | Text of the "load more" button. Defaults to the translated "Load more" label.                                                                                                                                           | `string`                                                      |                    |
| `showFormAvatar`    | `show-form-avatar` | Shows the customer avatar in the comment form. Has no effect when the form is hidden.                                                                                                                                   | `boolean`                                                     | `false`            |
| `sort`              | `sort`             | Initial sort order: `latest`, `oldest`, `bottom_rating`, `top_rating`, `most_helpful` or `verified_purchases`. A `sort` query parameter in the page URL overrides it, and choosing a value in the dropdown replaces it. | `string`                                                      |                    |
| `testimonials`      | `testimonials`     | Shows the store's testimonials (store reviews) instead of comments for `item-id`. It also hides the title and the comment form.                                                                                         | `boolean`                                                     | `false`            |
| `type`              | `type`             | What the comments are attached to: `page`, `product` or `blog`. The sort dropdown is not shown for `blog`.                                                                                                              | `CommentType.BLOG \| CommentType.PAGE \| CommentType.PRODUCT` | `CommentType.PAGE` |

## Methods [#methods]

Call these on the element or a React ref.

### `reload() => Promise<void>` [#reload--promisevoid]

Clears the list and fetches the first page of comments again, using the current `sort`.

## Related [#related]

Renders: [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading), [`<salla-comment-item>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-item), [`<salla-comment-form>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-form), [`<salla-reviews-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-summary).