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



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

Renders a horizontal strip of image/video attachment thumbnails with an
optional "+N" overflow indicator on the last visible item. When `clickable`
is true, opens `salla-attachment-view` when a thumbnail is clicked.

Media can be supplied as:

* `attachments` — full `{ id, url, mimeType?/type? }` objects
* `images` / `videos` — URL string arrays
* `rating` — object with `images` / `videos` arrays
* `productRatings` + `productId` — match a product rating, else fall back to `rating`

It is used by salla-comment-item to show review photos and videos, and a theme can use it for any
media strip. Nothing is rendered when there is no valid image or video. Thumbnails are plain
`div` elements with a click handler (images have an empty `alt`), so they are not keyboard accessible.

## Use it [#use-it]

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

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

## Example [#example]

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

export function Example() {
  return (
    <SallaAttachments
      images='["https://example.com/a.jpg", "https://example.com/b.jpg"]'
      videos='["https://example.com/c.mp4"]'
      maxVisible={3}
      clickable />
  );
}
```

```html
<salla-attachments
  images='["https://example.com/a.jpg", "https://example.com/b.jpg"]'
  videos='["https://example.com/c.mp4"]'
  max-visible="3"
  clickable
></salla-attachments>
```

## Properties [#properties]

| Property         | Attribute         | Description                                                                                                                                       | Type                                                                                        | Default |
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------- |
| `attachments`    | `attachments`     | Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a JSON string of the same shape.                                          | `Attachment[] \| string`                                                                    | `[]`    |
| `clickable`      | `clickable`       | When true, clicking a thumbnail opens the attachment lightbox.                                                                                    | `boolean`                                                                                   | `false` |
| `images`         | `images`          | Image URLs to display. Accepts a string array or a JSON string.                                                                                   | `string \| string[]`                                                                        | `[]`    |
| `maxVisible`     | `max-visible`     | Maximum number of thumbnails to show before displaying a "+N" overlay on the last visible item. Defaults to 4.                                    | `number`                                                                                    | `4`     |
| `productId`      | `product-id`      | Product id used to match an entry in `productRatings`.                                                                                            | `number \| string`                                                                          | `null`  |
| `productRatings` | `product-ratings` | Product ratings list. When set with `productId`, the matching rating's media is preferred over `rating`.                                          | `MediaSource[] \| string`                                                                   | `[]`    |
| `rating`         | `rating`          | Rating-like object with `images` / `videos` URL arrays. Used when `images`/`videos` are empty, and as a fallback when resolving `productRatings`. | `string \| { images?: string[]; videos?: string[]; product?: { id?: string \| number; }; }` | `null`  |
| `videos`         | `videos`          | Video URLs to display. Accepts a string array or a JSON string.                                                                                   | `string \| string[]`                                                                        | `[]`    |

## Related [#related]

Renders: [`<salla-attachment-view>`](https://docs.salla.dev/twilight/react/web-components/salla-attachment-view).

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