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



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

A reusable lightbox for viewing image/video attachments in a modal with a
scrollable thumbnails strip. Open it imperatively via the `open()` method.

## Use it [#use-it]

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

```tsx
import { SallaAttachmentView } from '@salla.sa/twilight-components-react/attachment-view';
```

## Example [#example]

```tsx
import { useEffect, useRef } from 'react';
import { SallaAttachmentView } from '@salla.sa/twilight-components-react/attachment-view';

export function Example() {
  const ref = useRef<any>(null);
  useEffect(() => {
    ref.current?.open(0);
  }, []);

  return (
    <SallaAttachmentView
      attachments={[{ id: '1', url: '/a.jpg' }, { id: '2', url: '/b.mp4' }]}
      ref={ref}
    />
  );
}
```

```ts
const viewer = document.querySelector('salla-attachment-view');
viewer.attachments = [{ id: '1', url: '/a.jpg' }, { id: '2', url: '/b.mp4' }];
viewer.open(0);
```

## 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 (for consumers outside of JSX/Stencil). | `Attachment[] \| string` | `[]`    |

## Methods [#methods]

Call these on the element or a React ref.

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

Close the viewer.

### `open(index?: number) => Promise<void>` [#openindex-number--promisevoid]

Open the viewer at the given attachment index.

| Parameter | Type     | Description                                            |
| --------- | -------- | ------------------------------------------------------ |
| `index`   | `number` | Index of the attachment to show first (defaults to 0). |

## Related [#related]

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

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