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



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

Actions header (panel) rendered on top of the wishlist `salla-products-list`. Place it in the wishlist page, as a sibling of the `salla-products-list` (it looks for that list in its parent element).
It takes no props. The share button is disabled while the list has no products.

It exposes a "Share" dropdown with two options:

* Share all items: shares the whole wishlist right away via `salla-social-share`.
* Share specific items: enables multi-selection on the sibling
  `salla-products-list` and shows a panel to share the selected products.

Selection is enabled on the products list at runtime, so no theme markup
changes are required and it works for every theme exposing the
`customer:wishlist.items.start` hook.

## Use it [#use-it]

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

```tsx
import { SallaWishlistActions } from '@salla.sa/twilight-components-react/wishlist-actions';
```

## Example [#example]

```tsx
import { SallaWishlistActions } from '@salla.sa/twilight-components-react/wishlist-actions';
import { SallaProductsList } from '@salla.sa/twilight-components-react';

export function Example() {
  return (
    <>
      <h1>Wishlist</h1>
      <SallaWishlistActions />
      <SallaProductsList source="wishlist" />
    </>
  );
}
```

```html
<h1>Wishlist</h1>
<salla-wishlist-actions></salla-wishlist-actions>
<salla-products-list source="wishlist"></salla-products-list>
```

## Methods [#methods]

Call these on the element or a React ref.

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

Leaves "share specific items" mode: clears the selection and turns off `selectable` on the sibling products list.

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

Creates a share link for the whole wishlist and opens the social share modal with it.

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

Creates a share link for the currently selected products and opens the social share modal with it. Does nothing when nothing is selected.

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

Enters "share specific items" mode: closes the menu, shows the selection panel and turns on `selectable` on the sibling products list.

## Related [#related]

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