salla-social-share
A share button that opens a menu or modal of social sharing links (WhatsApp, Facebook, X, email, copy link) for a URL.
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
In HTML or JSX, use the tag <salla-social-share> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
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
Example
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" />
);
}import { SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';
export function Example() {
return (
<SallaSocialShare mode="modal" modalTitle="Share this product" />
);
}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
Call these on the element or a React ref.
close() => Promise<void>
Closes the share menu or modal. Does nothing if it is already closed. Resolves with no value.
open() => Promise<void>
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>
Updates the share links with the current url and url-name and re-initialises AddToAny. Resolves with no value.
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
Renders: <salla-button>.
Used inside: <salla-wishlist-actions>.
salla-social
Renders a list of icon links to the store's social media accounts, read from the store settings (store.social).
salla-trust-badges
Shows the store's legal registration number in the theme footer: the Commercial Register number if the store has one, otherwise the Freelance Certificate number.