Twilight docs

A reusable lightbox for viewing image/video attachments in a modal with a scrollable thumbnails strip.

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

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

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

Example

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}
    />
  );
}

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`	`[]`