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



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

<Callout title="Used inside salla-comments">
  [`<salla-comments>`](https://docs.salla.dev/twilight/react/web-components/salla-comments) renders this component for you. You rarely use it directly.
</Callout>

Renders one customer review or admin reply: avatar, name, date, stars, an optional "Review details"
toggle with per-factor ratings, the text, attached images and videos, a "Helpful" like button and
any replies. Used inside salla-comments, which creates one per comment; a theme rarely places it
directly.

Attachments are shown only when the store settings allow images or videos. The like button needs
the store's `allow_likes` rating setting and appears only on product pages (`product.single`) for
non-admin comments that have an `id`; guests get a login message. Liked ids are remembered in
`localStorage` under `liked_comments`. The "Review details" toggle is a native `button`.

## Use it [#use-it]

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

```tsx
import { SallaCommentItem } from '@salla.sa/twilight-components-react/comment-item';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaCommentItem } from '@salla.sa/twilight-components-react/comment-item';

export function Example() {
  useEffect(() => {
    document.getElementById('c').comment = {
      id: 1,
      name: 'Sara',
      avatar: 'https://example.com/a.png',
      content: 'Great product',
      rating: 5,
      has_order: true,
      created_at: { date: '2024-05-01 14:30:00' },
    };
  }, []);

  return (
    <SallaCommentItem id="c" />
  );
}
```

```html
<salla-comment-item id="c"></salla-comment-item>
<script>
  document.getElementById('c').comment = {
    id: 1,
    name: 'Sara',
    avatar: 'https://example.com/a.png',
    content: 'Great product',
    rating: 5,
    has_order: true,
    created_at: { date: '2024-05-01 14:30:00' },
  };
</script>
```

## Properties [#properties]

| Property     | Attribute     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Type      | Default |
| ------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `comment`    | `comment`     | The comment to render. Set it as a JavaScript property. Uses `id`, `name`, `avatar`, `content` (rendered as HTML), `rating` or `stars` (1 to 5), `has_order`, `is_pinned`, `is_pending`, `status` (`'hidden'` marks a private comment with a lock icon), `type` (`'admin'` renders it as a reply), `likes_count`, `images`, `videos`, `factor_reviews` (`{ name, rating, label? }[]`), `replies` and `created_at.date` (a string like `2024-05-01 14:30:00`). Renders nothing when empty. | `Comment` |         |
| `hideBought` | `hide-bought` | When true, hides the "bought" and "rated" markers next to the commenter name.                                                                                                                                                                                                                                                                                                                                                                                                             | `Boolean` |         |

## Related [#related]

Renders: [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars), [`<salla-comment-factors>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-factors), [`<salla-tooltip>`](https://docs.salla.dev/twilight/react/web-components/salla-tooltip), [`<salla-attachments>`](https://docs.salla.dev/twilight/react/web-components/salla-attachments), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-comment-item>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-item).

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