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



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

A share button that opens a menu or modal of social sharing links (WhatsApp, Facebook, X, email, copy link) for a URL.
A theme would use it on product, blog or other pages to let visitors share the page. The share links are powered by AddToAny, which the component loads itself.
Inside the Salla mobile app webview, clicking the button hands the URL to the native share sheet instead of showing the menu.
Each share fires the `share-element` event on `salla.event` with `{ share_via, url, title }`.
The modal variant has `role="dialog"` and `aria-modal="true"`, a close button with an accessible label, and closes when the backdrop is clicked.
In both variants a click outside the component closes it.

## Use it [#use-it]

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

```tsx
import { SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';
```

**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.

## Try it [#try-it]

<Demo name="web-components/salla-social-share" />

## Example [#example]

```tsx
import { SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';

export function Example() {
  return (
    <SallaSocialShare url="https://example.com/products/123" urlName="Blue shirt" platforms="whatsapp,twitter,copy_link" />
  );
}
```

```html
<salla-social-share url="https://example.com/products/123" url-name="Blue shirt" platforms="whatsapp,twitter,copy_link"></salla-social-share>
```

```tsx
import { SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';

export function Example() {
  return (
    <SallaSocialShare mode="modal" modalTitle="Share this product" />
  );
}
```

```html
<salla-social-share mode="modal" modal-title="Share this product"></salla-social-share>
```

## Properties [#properties]

| Property     | Attribute     | Description                                                                                                                                                                                                                                                                                  | Type                   | Default                                       |
| ------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------- |
| `modalTitle` | `modal-title` | Optional title for the modal variant header. Defaults to a localized "Share".                                                                                                                                                                                                                | `string`               | `''`                                          |
| `mode`       | `mode`        | Share UI variant: `default` dropdown menu or centered `modal` dialog.                                                                                                                                                                                                                        | `"default" \| "modal"` | `'default'`                                   |
| `platforms`  | `platforms`   | Comma-separated list of platforms to show, from `facebook`, `twitter`, `whatsapp`, `email` and `copy_link`. The `default` mode shows them in the order given; the `modal` mode always uses the order email, whatsapp, twitter, facebook and shows the copy row when `copy_link` is included. | `string`               | `'facebook,twitter,whatsapp,email,copy_link'` |
| `url`        | `url`         | The URL to share. When empty, the current page URL is shared. Changing it re-syncs the share links.                                                                                                                                                                                          | `string`               | `''`                                          |
| `urlName`    | `url-name`    | The title sent along with the shared URL. When empty, the page `document.title` is used.                                                                                                                                                                                                     | `string`               | `''`                                          |

## Methods [#methods]

Call these on the element or a React ref.

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

Closes the share menu or modal. Does nothing if it is already closed. Resolves with no value.

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

Opens the share menu (or the modal when `mode` is `modal`). Does nothing if it is already open. Resolves with no value once opened.

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

Updates the share links with the current `url` and `url-name` and re-initialises AddToAny. Resolves with no value.

## Slots [#slots]

| Slot     | Description                                                                                                                                                     |
| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `widget` | Replaces the default share button. Your element is not wired up automatically: call the `open()` method (or `close()`) on the component from its click handler. |

## Related [#related]

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

Used inside: [`<salla-wishlist-actions>`](https://docs.salla.dev/twilight/react/web-components/salla-wishlist-actions).