Share

import { createSocialShare, BLUESKY } from "@solid-primitives/share";

const { share, close, isSharing } = createSocialShare(() => ({
  title: "SolidJS.com",
  url: "https://www.solidjs.com",
  description: "Simple and well-behaved reactivity!",
}));

share(BLUESKY);

function createSocialShare(
  options: Accessor<{
    network?: Network;
    url: string;
    title: string;
    description: string;
    quote?: string;
    hashtags?: string;
    twitterUser?: string;
    media?: string;
    tag?: string;
    popup?: SharePopupOptions;
  }>,
  controller: Window = window,
): SocialShareResult;

type SocialShareResult = {
  share: (network?: Network) => void;
  close: () => void;
  isSharing: Accessor<boolean>;
};

const x: Network = "https://www.x.com/intent/tweet?text=@t&url=@u&hashtags=@h@tu";

import { makeWebShare } from "@solid-primitives/share";

const share = makeWebShare();

try {
  await share({ url: "https://solidjs.com" });
} catch (e) {
  console.error(e);
}

import { createWebShare } from "@solid-primitives/share";

const { share, pending, status, message } = createWebShare();

<button
  disabled={pending()}
  onClick={() => share({ url: location.href, title: document.title })}
>
  {pending() ? "Sharing..." : "Share"}
</button>

<Show when={status() === false}>
  <p>Share failed: {message()}</p>
</Show>

function createWebShare(): WebShareResult;

type WebShareResult = {
  /** Imperatively trigger the Web Share API with the provided data. */
  share: (data: ShareData) => Promise<void>;
  /** True while the share dialog is open / the promise is pending. */
  pending: Accessor<boolean>;
  /** True on success, false on failure, undefined before first share. */
  status: Accessor<boolean | undefined>;
  /** The error message if the share failed, otherwise undefined. */
  message: Accessor<string | undefined>;
};