react-sharesheet 1.0.0

package/src/headless.ts

@@ -0,0 +1,45 @@
+// Headless exports - just the hook and utilities, no styled components
+
+export { useShareSheet, useShareMenu, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
+
+export {
+  shareToWhatsApp,
+  shareToTelegram,
+  shareToX,
+  shareToFacebook,
+  openInstagram,
+  openTikTok,
+  openThreads,
+  shareToSnapchat,
+  shareViaSMS,
+  shareViaEmail,
+  shareToLinkedIn,
+  shareToReddit,
+} from "./share-functions";
+
+export { cn, openUrl, getSafeUrl } from "./utils";
+
+// Platform configs (colors, icons, labels) - SINGLE SOURCE OF TRUTH
+export {
+  PLATFORMS,
+  PLATFORM_IDS,
+  PLATFORM_COLORS,
+  PLATFORM_ICONS,
+  PLATFORM_LABELS,
+  PLATFORM_CSS_VARS,
+  getPlatform,
+  getAllPlatforms,
+  getPlatformColor,
+  getPlatformIcon,
+  getPlatformLabel,
+  generateCssVarDefaults,
+  type PlatformConfig,
+  type PlatformColor,
+} from "./platforms";
+
+export type {
+  UseShareSheetReturn,
+  UseShareMenuReturn,
+  ShareOption,
+  ShareButtonConfig,
+} from "./types";

package/src/hooks.ts

@@ -0,0 +1,192 @@
+"use client";
+
+import { useMemo, useState, useCallback } from "react";
+import { getSafeUrl } from "./utils";
+import {
+  shareToWhatsApp,
+  shareToTelegram,
+  shareToX,
+  shareToFacebook,
+  openInstagram,
+  openTikTok,
+  openThreads,
+  shareToSnapchat,
+  shareViaSMS,
+  shareViaEmail,
+  shareToLinkedIn,
+  shareToReddit,
+} from "./share-functions";
+import type { UseShareSheetReturn } from "./types";
+
+export interface UseShareSheetOptions {
+  /** URL to share */
+  shareUrl: string;
+  /** Text to share */
+  shareText: string;
+  /** Download URL (optional) */
+  downloadUrl?: string | null;
+  /** Download filename (optional) */
+  downloadFilename?: string;
+  /** Email subject (optional) */
+  emailSubject?: string;
+  /** Callback after native share */
+  onNativeShare?: () => void;
+  /** Callback after copy */
+  onCopy?: () => void;
+  /** Callback after download starts */
+  onDownload?: () => void;
+}
+
+/**
+ * Headless hook for share sheet functionality.
+ * Use this to build your own custom share UI.
+ */
+export function useShareSheet({
+  shareUrl,
+  shareText,
+  downloadUrl,
+  downloadFilename,
+  emailSubject = "Share",
+  onNativeShare,
+  onCopy,
+  onDownload,
+}: UseShareSheetOptions): UseShareSheetReturn {
+  const [copied, setCopied] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+
+  const canNativeShare = useMemo(() => {
+    return typeof navigator !== "undefined" && "share" in navigator;
+  }, []);
+
+  const safeUrl = getSafeUrl(shareUrl);
+
+  const copyLink = useCallback(async () => {
+    if (!safeUrl) return;
+    try {
+      await navigator.clipboard.writeText(safeUrl);
+      setCopied(true);
+      onCopy?.();
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      // ignore
+    }
+  }, [safeUrl, onCopy]);
+
+  const nativeShare = useCallback(async () => {
+    if (!safeUrl) return;
+    const nav = navigator as Navigator & {
+      share?: (data: ShareData) => Promise<void>;
+    };
+    if (!("share" in nav) || typeof nav.share !== "function") return;
+    try {
+      await nav.share({
+        title: shareText,
+        text: shareText,
+        url: safeUrl,
+      });
+      onNativeShare?.();
+    } catch {
+      // user canceled or share failed -> ignore
+    }
+  }, [safeUrl, shareText, onNativeShare]);
+
+  const downloadFile = useCallback(async () => {
+    const url = (downloadUrl ?? "").trim();
+    if (!url) return;
+    try {
+      setDownloading(true);
+      onDownload?.();
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`Failed to fetch file (${res.status})`);
+      const blob = await res.blob();
+      const href = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = href;
+      a.download = downloadFilename || "download";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(href);
+    } catch {
+      // ignore
+    } finally {
+      setDownloading(false);
+    }
+  }, [downloadUrl, downloadFilename, onDownload]);
+
+  const shareWhatsApp = useCallback(() => {
+    shareToWhatsApp(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+
+  const shareTelegram = useCallback(() => {
+    shareToTelegram(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+
+  const shareX = useCallback(() => {
+    shareToX(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+
+  const shareFacebook = useCallback(() => {
+    shareToFacebook(safeUrl);
+  }, [safeUrl]);
+
+  const shareInstagram = useCallback(() => {
+    openInstagram();
+  }, []);
+
+  const shareTikTok = useCallback(() => {
+    openTikTok();
+  }, []);
+
+  const shareThreads = useCallback(() => {
+    openThreads();
+  }, []);
+
+  const shareSnapchat = useCallback(() => {
+    shareToSnapchat(safeUrl);
+  }, [safeUrl]);
+
+  const shareSMS = useCallback(() => {
+    shareViaSMS(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+
+  const shareEmail = useCallback(() => {
+    shareViaEmail(safeUrl, shareText, emailSubject);
+  }, [safeUrl, shareText, emailSubject]);
+
+  const shareLinkedIn = useCallback(() => {
+    shareToLinkedIn(safeUrl);
+  }, [safeUrl]);
+
+  const shareReddit = useCallback(() => {
+    shareToReddit(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+
+  return {
+    canNativeShare,
+    copied,
+    downloading,
+    safeUrl,
+    copyLink,
+    nativeShare,
+    downloadFile,
+    shareWhatsApp,
+    shareTelegram,
+    shareX,
+    shareFacebook,
+    shareInstagram,
+    shareTikTok,
+    shareThreads,
+    shareSnapchat,
+    shareSMS,
+    shareEmail,
+    shareLinkedIn,
+    shareReddit,
+  };
+}
+
+// Legacy export for backwards compatibility
+/** @deprecated Use useShareSheet instead */
+export const useShareMenu = useShareSheet;
+/** @deprecated Use UseShareSheetOptions instead */
+export type UseShareMenuOptions = UseShareSheetOptions;

package/src/index.ts

@@ -0,0 +1,68 @@
+// Styled components
+export { ShareSheetContent, ShareMenuContent } from "./ShareSheetContent";
+export { ShareSheetDrawer, ShareMenuDrawer } from "./ShareSheetDrawer";
+
+// Headless hook
+export { useShareSheet, useShareMenu, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
+
+// Types
+export type {
+  ShareSheetContentProps,
+  ShareSheetDrawerProps,
+  ShareSheetContentClassNames,
+  ShareSheetDrawerClassNames,
+  // Legacy types (deprecated)
+  ShareMenuContentProps,
+  ShareMenuDrawerProps,
+  ShareMenuContentClassNames,
+  ShareMenuDrawerClassNames,
+  // Common types
+  ShareOption,
+  ShareButtonConfig,
+  UseShareSheetReturn,
+  UseShareMenuReturn,
+  PreviewType,
+  PreviewConfig,
+} from "./types";
+
+// CSS Variables for UI (drawer, title, etc.)
+export { CSS_VARS_UI, CSS_VAR_UI_DEFAULTS } from "./types";
+// Legacy exports (deprecated but kept for backwards compatibility)
+export { CSS_VARS, CSS_VAR_DEFAULTS } from "./types";
+
+// Platform configs (colors, icons, labels) - SINGLE SOURCE OF TRUTH
+export {
+  PLATFORMS,
+  PLATFORM_IDS,
+  PLATFORM_COLORS,
+  PLATFORM_ICONS,
+  PLATFORM_LABELS,
+  PLATFORM_CSS_VARS,
+  getPlatform,
+  getAllPlatforms,
+  getPlatformColor,
+  getPlatformIcon,
+  getPlatformLabel,
+  generateCssVarDefaults,
+  type PlatformConfig,
+  type PlatformColor,
+} from "./platforms";
+
+// Utility functions for custom implementations
+export { cn, openUrl, getSafeUrl } from "./utils";
+
+// Individual share functions
+export {
+  shareToWhatsApp,
+  shareToTelegram,
+  shareToX,
+  shareToFacebook,
+  openInstagram,
+  openTikTok,
+  openThreads,
+  shareToSnapchat,
+  shareViaSMS,
+  shareViaEmail,
+  shareToLinkedIn,
+  shareToReddit,
+} from "./share-functions";

package/src/platforms.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Download,
+  Link as LinkIcon,
+  Mail,
+  MessageCircle,
+  Send,
+} from "lucide-react";
+import {
+  FaFacebookF,
+  FaInstagram,
+  FaLinkedin,
+  FaReddit,
+  FaTelegramPlane,
+  FaTiktok,
+  FaWhatsapp,
+} from "react-icons/fa";
+import { FaXTwitter, FaThreads, FaSnapchat } from "react-icons/fa6";
+import type { ShareOption } from "./types";
+
+/** Platform color configuration */
+export interface PlatformColor {
+  /** Background color (hex) */
+  bg: string;
+  /** Text/icon color (hex) */
+  text: string;
+}
+
+/** Platform configuration */
+export interface PlatformConfig {
+  /** Platform identifier */
+  id: ShareOption;
+  /** Display label */
+  label: string;
+  /** Colors */
+  colors: PlatformColor;
+  /** Icon component (accepts size prop) */
+  Icon: (props: { size?: number; className?: string }) => ReactNode;
+  /** CSS variable name for background */
+  cssVar: string;
+}
+
+/** All platform IDs in default order */
+export const PLATFORM_IDS: readonly ShareOption[] = [
+  "native",
+  "copy",
+  "download",
+  "whatsapp",
+  "telegram",
+  "instagram",
+  "facebook",
+  "snapchat",
+  "sms",
+  "email",
+  "linkedin",
+  "reddit",
+  "x",
+  "tiktok",
+  "threads",
+] as const;
+
+/** Platform colors - hex values for each platform (SOURCE OF TRUTH) */
+export const PLATFORM_COLORS: Record<ShareOption, PlatformColor> = {
+  native: { bg: "#7c3aed", text: "#ffffff" },
+  copy: { bg: "#3b82f6", text: "#ffffff" },
+  download: { bg: "#ef4444", text: "#ffffff" },
+  whatsapp: { bg: "#25D366", text: "#ffffff" },
+  telegram: { bg: "#229ED9", text: "#ffffff" },
+  instagram: { bg: "#E1306C", text: "#ffffff" },
+  facebook: { bg: "#1877F2", text: "#ffffff" },
+  snapchat: { bg: "#FFFC00", text: "#000000" },
+  sms: { bg: "#22c55e", text: "#ffffff" },
+  email: { bg: "#f97316", text: "#ffffff" },
+  linkedin: { bg: "#0A66C2", text: "#ffffff" },
+  reddit: { bg: "#FF4500", text: "#ffffff" },
+  x: { bg: "#000000", text: "#ffffff" },
+  tiktok: { bg: "#000000", text: "#ffffff" },
+  threads: { bg: "#000000", text: "#ffffff" },
+} as const;
+
+/** Platform labels (SOURCE OF TRUTH) */
+export const PLATFORM_LABELS: Record<ShareOption, string> = {
+  native: "Share…",
+  copy: "Copy",
+  download: "Download",
+  whatsapp: "WhatsApp",
+  telegram: "Telegram",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  snapchat: "Snapchat",
+  sms: "SMS",
+  email: "Email",
+  linkedin: "LinkedIn",
+  reddit: "Reddit",
+  x: "X",
+  tiktok: "TikTok",
+  threads: "Threads",
+} as const;
+
+/** Platform icons - React components (SOURCE OF TRUTH) */
+export const PLATFORM_ICONS: Record<ShareOption, (props: { size?: number; className?: string }) => ReactNode> = {
+  native: ({ size = 22, className }) => <Send size={size} className={className} />,
+  copy: ({ size = 22, className }) => <LinkIcon size={size} className={className} />,
+  download: ({ size = 22, className }) => <Download size={size} className={className} />,
+  whatsapp: ({ size = 22, className }) => <FaWhatsapp size={size} className={className} />,
+  telegram: ({ size = 22, className }) => <FaTelegramPlane size={size} className={className} />,
+  instagram: ({ size = 22, className }) => <FaInstagram size={size} className={className} />,
+  facebook: ({ size = 22, className }) => <FaFacebookF size={size} className={className} />,
+  snapchat: ({ size = 22, className }) => <FaSnapchat size={size} className={className} />,
+  sms: ({ size = 22, className }) => <MessageCircle size={size} className={className} />,
+  email: ({ size = 22, className }) => <Mail size={size} className={className} />,
+  linkedin: ({ size = 22, className }) => <FaLinkedin size={size} className={className} />,
+  reddit: ({ size = 22, className }) => <FaReddit size={size} className={className} />,
+  x: ({ size = 22, className }) => <FaXTwitter size={size} className={className} />,
+  tiktok: ({ size = 22, className }) => <FaTiktok size={size} className={className} />,
+  threads: ({ size = 22, className }) => <FaThreads size={size} className={className} />,
+} as const;
+
+/** CSS variable names for platform backgrounds */
+export const PLATFORM_CSS_VARS: Record<ShareOption, string> = {
+  native: "--sharesheet-native-bg",
+  copy: "--sharesheet-copy-bg",
+  download: "--sharesheet-download-bg",
+  whatsapp: "--sharesheet-whatsapp-bg",
+  telegram: "--sharesheet-telegram-bg",
+  instagram: "--sharesheet-instagram-bg",
+  facebook: "--sharesheet-facebook-bg",
+  snapchat: "--sharesheet-snapchat-bg",
+  sms: "--sharesheet-sms-bg",
+  email: "--sharesheet-email-bg",
+  linkedin: "--sharesheet-linkedin-bg",
+  reddit: "--sharesheet-reddit-bg",
+  x: "--sharesheet-x-bg",
+  tiktok: "--sharesheet-tiktok-bg",
+  threads: "--sharesheet-threads-bg",
+} as const;
+
+/** Full platform configurations */
+export const PLATFORMS: Record<ShareOption, PlatformConfig> = Object.fromEntries(
+  PLATFORM_IDS.map((id) => [
+    id,
+    {
+      id,
+      label: PLATFORM_LABELS[id],
+      colors: PLATFORM_COLORS[id],
+      Icon: PLATFORM_ICONS[id],
+      cssVar: PLATFORM_CSS_VARS[id],
+    },
+  ])
+) as Record<ShareOption, PlatformConfig>;
+
+/** Get platform config by id */
+export function getPlatform(id: ShareOption): PlatformConfig {
+  return PLATFORMS[id];
+}
+
+/** Get all platform configs as array */
+export function getAllPlatforms(): PlatformConfig[] {
+  return PLATFORM_IDS.map((id) => PLATFORMS[id]);
+}
+
+/** Get platform color */
+export function getPlatformColor(id: ShareOption): PlatformColor {
+  return PLATFORM_COLORS[id];
+}
+
+/** Get platform icon component */
+export function getPlatformIcon(id: ShareOption): (props: { size?: number; className?: string }) => ReactNode {
+  return PLATFORM_ICONS[id];
+}
+
+/** Get platform label */
+export function getPlatformLabel(id: ShareOption): string {
+  return PLATFORM_LABELS[id];
+}
+
+/** Generate CSS variable defaults from platform colors */
+export function generateCssVarDefaults(): Record<string, string> {
+  const defaults: Record<string, string> = {};
+  PLATFORM_IDS.forEach((id) => {
+    defaults[PLATFORM_CSS_VARS[id]] = PLATFORM_COLORS[id].bg;
+  });
+  return defaults;
+}

package/src/share-functions.ts

@@ -0,0 +1,63 @@
+import { openUrl } from "./utils";
+
+export function shareToWhatsApp(url: string, text: string) {
+  const encoded = encodeURIComponent(`${text}\n${url}`);
+  openUrl(`https://api.whatsapp.com/send?text=${encoded}`);
+}
+
+export function shareToTelegram(url: string, text: string) {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://t.me/share/url?url=${encodedUrl}&text=${encodedText}`);
+}
+
+export function shareToX(url: string, text: string) {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`);
+}
+
+export function shareToFacebook(url: string) {
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`);
+}
+
+export function openInstagram() {
+  window.location.href = "instagram://";
+}
+
+export function openTikTok() {
+  window.location.href = "tiktok://";
+}
+
+export function openThreads() {
+  window.location.href = "threads://";
+}
+
+export function shareToSnapchat(url: string) {
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.snapchat.com/scan?attachmentUrl=${encodedUrl}`);
+}
+
+export function shareViaSMS(url: string, text: string) {
+  const body = encodeURIComponent(`${text}\n${url}`);
+  window.location.href = `sms:?body=${body}`;
+}
+
+export function shareViaEmail(url: string, text: string, subject = "Share") {
+  const encodedSubject = encodeURIComponent(subject);
+  const body = encodeURIComponent(`${text}\n\n${url}`);
+  window.location.href = `mailto:?subject=${encodedSubject}&body=${body}`;
+}
+
+export function shareToLinkedIn(url: string) {
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`);
+}
+
+export function shareToReddit(url: string, text: string) {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.reddit.com/submit?url=${encodedUrl}&title=${encodedText}`);
+}
+