react-sharesheet 1.0.0 → 1.2.0

package/src/__tests__/utils.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { cn, getSafeUrl, openUrl } from "../utils";
+
+describe("utils", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("cn", () => {
+    it("should merge class names", () => {
+      expect(cn("foo", "bar")).toBe("foo bar");
+    });
+
+    it("should handle conditional classes", () => {
+      expect(cn("foo", false && "bar", "baz")).toBe("foo baz");
+    });
+
+    it("should handle undefined values", () => {
+      expect(cn("foo", undefined, "bar")).toBe("foo bar");
+    });
+
+    it("should merge Tailwind classes correctly", () => {
+      expect(cn("p-4", "p-2")).toBe("p-2");
+      expect(cn("text-red-500", "text-blue-500")).toBe("text-blue-500");
+    });
+
+    it("should handle empty inputs", () => {
+      expect(cn()).toBe("");
+      expect(cn("")).toBe("");
+    });
+  });
+
+  describe("getSafeUrl", () => {
+    it("should return URL if provided", () => {
+      expect(getSafeUrl("https://example.com")).toBe("https://example.com");
+    });
+
+    it("should return URL as-is (no trimming)", () => {
+      // Current implementation doesn't trim
+      expect(getSafeUrl("  https://example.com  ")).toBe("  https://example.com  ");
+    });
+
+    it("should return current location for empty URL", () => {
+      const originalHref = window.location.href;
+      expect(getSafeUrl("")).toBe(originalHref);
+    });
+
+    it("should return current location for falsy URL", () => {
+      const originalHref = window.location.href;
+      expect(getSafeUrl("")).toBe(originalHref);
+    });
+  });
+
+  describe("openUrl", () => {
+    it("should open URL in new tab with security options", () => {
+      openUrl("https://example.com");
+      expect(window.open).toHaveBeenCalledWith(
+        "https://example.com",
+        "_blank",
+        "noopener,noreferrer"
+      );
+    });
+  });
+});

package/src/headless.ts

@@ -1,6 +1,9 @@
 // Headless exports - just the hook and utilities, no styled components
 
-export { useShareSheet, useShareMenu, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
+export { useShareSheet, useShareMenu, useOGData, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
+
+// OG Data fetcher
+export { fetchOGData, clearOGCache, type OGData } from "./og-fetcher";
 
 export {
   shareToWhatsApp,

package/src/hooks.ts

@@ -1,7 +1,8 @@
 "use client";
 
-import { useMemo, useState, useCallback } from "react";
-import { getSafeUrl } from "./utils";
+import { useMemo, useState, useCallback, useEffect } from "react";
+import { getSafeUrl, isMobileDevice, getAllPlatformAvailability } from "./utils";
+import { fetchOGData, type OGData } from "./og-fetcher";
 import {
   shareToWhatsApp,
   shareToTelegram,
@@ -58,6 +59,14 @@ export function useShareSheet({
     return typeof navigator !== "undefined" && "share" in navigator;
   }, []);
 
+  const isMobile = useMemo(() => {
+    return isMobileDevice();
+  }, []);
+
+  const platformAvailability = useMemo(() => {
+    return getAllPlatformAvailability();
+  }, []);
+
   const safeUrl = getSafeUrl(shareUrl);
 
   const copyLink = useCallback(async () => {
@@ -167,6 +176,8 @@ export function useShareSheet({
     copied,
     downloading,
     safeUrl,
+    isMobile,
+    platformAvailability,
     copyLink,
     nativeShare,
     downloadFile,
@@ -185,6 +196,53 @@ export function useShareSheet({
   };
 }
 
+/**
+ * Hook to fetch OG (Open Graph) data from a URL.
+ * Automatically fetches and caches OG metadata for link previews.
+ */
+export function useOGData(url: string | undefined): {
+  ogData: OGData | null;
+  loading: boolean;
+  error: string | null;
+} {
+  const [ogData, setOgData] = useState<OGData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!url) {
+      setOgData(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetchOGData(url)
+      .then((data) => {
+        if (!cancelled) {
+          setOgData(data);
+          setLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to fetch OG data");
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  return { ogData, loading, error };
+}
+
 // Legacy export for backwards compatibility
 /** @deprecated Use useShareSheet instead */
 export const useShareMenu = useShareSheet;

package/src/index.ts

@@ -3,7 +3,10 @@ export { ShareSheetContent, ShareMenuContent } from "./ShareSheetContent";
 export { ShareSheetDrawer, ShareMenuDrawer } from "./ShareSheetDrawer";
 
 // Headless hook
-export { useShareSheet, useShareMenu, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
+export { useShareSheet, useShareMenu, useOGData, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
+
+// OG Data fetcher
+export { fetchOGData, clearOGCache, type OGData } from "./og-fetcher";
 
 // Types
 export type {
@@ -21,8 +24,7 @@ export type {
   ShareButtonConfig,
   UseShareSheetReturn,
   UseShareMenuReturn,
-  PreviewType,
-  PreviewConfig,
+  PlatformAvailability,
 } from "./types";
 
 // CSS Variables for UI (drawer, title, etc.)
@@ -49,7 +51,21 @@ export {
 } from "./platforms";
 
 // Utility functions for custom implementations
-export { cn, openUrl, getSafeUrl } from "./utils";
+export { 
+  cn, 
+  openUrl, 
+  getSafeUrl,
+  // Device detection
+  isMobileDevice,
+  isIOSDevice,
+  isAndroidDevice,
+  // Platform availability
+  checkPlatformAvailability,
+  getAllPlatformAvailability,
+  warnUnavailablePlatform,
+  MOBILE_ONLY_PLATFORMS,
+  MOBILE_PREFERRED_PLATFORMS,
+} from "./utils";
 
 // Individual share functions
 export {

package/src/og-fetcher.ts

@@ -0,0 +1,64 @@
+// OG Data fetcher using Microlink API (free, no API key required)
+
+export interface OGData {
+  title?: string;
+  description?: string;
+  image?: string;
+  url?: string;
+  siteName?: string;
+}
+
+export interface OGFetchResult {
+  data: OGData | null;
+  loading: boolean;
+  error: string | null;
+}
+
+// Cache to avoid re-fetching the same URL
+const ogCache = new Map<string, OGData>();
+
+export async function fetchOGData(url: string): Promise<OGData | null> {
+  // Check cache first
+  if (ogCache.has(url)) {
+    return ogCache.get(url)!;
+  }
+
+  try {
+    // Use Microlink API to fetch OG data (free tier, no API key needed)
+    const apiUrl = `https://api.microlink.io?url=${encodeURIComponent(url)}`;
+    const response = await fetch(apiUrl);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch OG data: ${response.status}`);
+    }
+
+    const json = await response.json();
+    
+    if (json.status !== "success" || !json.data) {
+      return null;
+    }
+
+    const { title, description, image, url: canonicalUrl, publisher } = json.data;
+
+    const ogData: OGData = {
+      title: title || undefined,
+      description: description || undefined,
+      image: image?.url || undefined,
+      url: canonicalUrl || url,
+      siteName: publisher || undefined,
+    };
+
+    // Cache the result
+    ogCache.set(url, ogData);
+
+    return ogData;
+  } catch (error) {
+    console.warn("[react-sharesheet] Failed to fetch OG data:", error);
+    return null;
+  }
+}
+
+// Clear cache (useful for testing or forcing refresh)
+export function clearOGCache(): void {
+  ogCache.clear();
+}

package/src/share-functions.ts

@@ -1,4 +1,8 @@
-import { openUrl } from "./utils";
+import { 
+  openUrl, 
+  checkPlatformAvailability, 
+  warnUnavailablePlatform,
+} from "./utils";
 
 export function shareToWhatsApp(url: string, text: string) {
   const encoded = encodeURIComponent(`${text}\n${url}`);
@@ -23,14 +27,29 @@ export function shareToFacebook(url: string) {
 }
 
 export function openInstagram() {
+  const availability = checkPlatformAvailability("instagram");
+  if (!availability.available) {
+    warnUnavailablePlatform("instagram", availability.reason!);
+    // Still attempt to open - it may work on some desktop browsers with app installed
+  }
   window.location.href = "instagram://";
 }
 
 export function openTikTok() {
+  const availability = checkPlatformAvailability("tiktok");
+  if (!availability.available) {
+    warnUnavailablePlatform("tiktok", availability.reason!);
+    // Still attempt to open - it may work on some desktop browsers with app installed
+  }
   window.location.href = "tiktok://";
 }
 
 export function openThreads() {
+  const availability = checkPlatformAvailability("threads");
+  if (!availability.available) {
+    warnUnavailablePlatform("threads", availability.reason!);
+    // Still attempt to open - it may work on some desktop browsers with app installed
+  }
   window.location.href = "threads://";
 }
 
@@ -40,6 +59,11 @@ export function shareToSnapchat(url: string) {
 }
 
 export function shareViaSMS(url: string, text: string) {
+  const availability = checkPlatformAvailability("sms");
+  if (!availability.available) {
+    warnUnavailablePlatform("sms", availability.reason!);
+    // Still attempt to open - it may work on some devices
+  }
   const body = encodeURIComponent(`${text}\n${url}`);
   window.location.href = `sms:?body=${body}`;
 }

package/src/types.ts

@@ -97,32 +97,13 @@ export interface ShareSheetDrawerClassNames extends ShareSheetContentClassNames
   trigger?: string;
 }
 
-/** Preview content type */
-export type PreviewType = "image" | "video" | "audio" | "file" | "link" | "auto";
-
-/** Preview configuration */
-export interface PreviewConfig {
-  /** URL of the content to preview */
-  url: string;
-  /** Type of content (auto-detected if not provided) */
-  type?: PreviewType;
-  /** Filename to display (for file/audio types) */
-  filename?: string;
-  /** Alt text for images */
-  alt?: string;
-  /** Poster image for videos */
-  poster?: string;
-}
-
 export interface ShareSheetContentProps {
   /** Title displayed at the top of the sheet */
   title?: string;
-  /** URL to share */
+  /** URL to share (OG preview will be fetched automatically) */
   shareUrl: string;
   /** Text to share alongside the URL */
   shareText: string;
-  /** Preview of content being shared (string URL or config object) */
-  preview?: string | PreviewConfig | null;
   /** Optional URL for download functionality */
   downloadUrl?: string | null;
   /** Filename for downloaded file */
@@ -175,6 +156,14 @@ export interface ShareButtonConfig {
   condition?: boolean;
 }
 
+/** Platform availability status */
+export interface PlatformAvailability {
+  /** Whether the platform is available on this device */
+  available: boolean;
+  /** Reason why platform is unavailable (if applicable) */
+  reason?: string;
+}
+
 /** Return type of useShareSheet hook */
 export interface UseShareSheetReturn {
   /** Whether the browser supports native share */
@@ -185,6 +174,10 @@ export interface UseShareSheetReturn {
   downloading: boolean;
   /** The safe URL (falls back to current page URL) */
   safeUrl: string;
+  /** Whether the current device is mobile */
+  isMobile: boolean;
+  /** Availability status for each platform */
+  platformAvailability: Record<ShareOption, PlatformAvailability>;
   /** Copy the share URL to clipboard */
   copyLink: () => Promise<void>;
   /** Trigger native share dialog */
@@ -199,15 +192,15 @@ export interface UseShareSheetReturn {
   shareX: () => void;
   /** Share to Facebook */
   shareFacebook: () => void;
-  /** Open Instagram app */
+  /** Open Instagram app (mobile only - will warn on desktop) */
   shareInstagram: () => void;
-  /** Open TikTok app */
+  /** Open TikTok app (mobile only - will warn on desktop) */
   shareTikTok: () => void;
-  /** Open Threads app */
+  /** Open Threads app (mobile only - will warn on desktop) */
   shareThreads: () => void;
   /** Share to Snapchat */
   shareSnapchat: () => void;
-  /** Share via SMS */
+  /** Share via SMS (mobile only - will warn on desktop) */
   shareSMS: () => void;
   /** Share via Email */
   shareEmail: () => void;

package/src/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { ShareOption, PlatformAvailability } from "./types";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -13,3 +14,127 @@ export function getSafeUrl(shareUrl: string): string {
   return shareUrl || (typeof window !== "undefined" ? window.location.href : "");
 }
 
+/**
+ * Detect if the current device is a mobile device.
+ * Uses user agent detection as the primary method.
+ */
+export function isMobileDevice(): boolean {
+  if (typeof navigator === "undefined") return false;
+  
+  const userAgent = navigator.userAgent || navigator.vendor || "";
+  
+  // Check for mobile user agents
+  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+  
+  // Also check for touch capability as a secondary signal
+  const hasTouch = typeof window !== "undefined" && (
+    "ontouchstart" in window ||
+    navigator.maxTouchPoints > 0
+  );
+  
+  // User agent is more reliable than touch detection alone
+  // (many desktop browsers support touch)
+  return mobileRegex.test(userAgent);
+}
+
+/**
+ * Detect if the current device is iOS
+ */
+export function isIOSDevice(): boolean {
+  if (typeof navigator === "undefined") return false;
+  
+  const userAgent = navigator.userAgent || "";
+  return /iPhone|iPad|iPod/i.test(userAgent);
+}
+
+/**
+ * Detect if the current device is Android
+ */
+export function isAndroidDevice(): boolean {
+  if (typeof navigator === "undefined") return false;
+  
+  const userAgent = navigator.userAgent || "";
+  return /Android/i.test(userAgent);
+}
+
+/** Platforms that require mobile devices (deep links / URL schemes) */
+export const MOBILE_ONLY_PLATFORMS: readonly ShareOption[] = [
+  "instagram",
+  "tiktok", 
+  "threads",
+  "sms",
+] as const;
+
+/** Platforms that work better on mobile but may partially work on desktop */
+export const MOBILE_PREFERRED_PLATFORMS: readonly ShareOption[] = [
+  "snapchat",
+  "whatsapp",
+] as const;
+
+/**
+ * Check if a share platform is available on the current device.
+ * Returns availability status and reason if unavailable.
+ */
+export function checkPlatformAvailability(platform: ShareOption): PlatformAvailability {
+  const isMobile = isMobileDevice();
+  
+  // Deep link platforms - require mobile device
+  if (MOBILE_ONLY_PLATFORMS.includes(platform)) {
+    if (!isMobile) {
+      return {
+        available: false,
+        reason: `${platform} requires a mobile device with the app installed`,
+      };
+    }
+  }
+  
+  // SMS - requires mobile or device with SMS capability
+  if (platform === "sms" && !isMobile) {
+    return {
+      available: false,
+      reason: "SMS sharing requires a mobile device",
+    };
+  }
+  
+  // Native share - check browser support
+  if (platform === "native") {
+    const canShare = typeof navigator !== "undefined" && "share" in navigator;
+    if (!canShare) {
+      return {
+        available: false,
+        reason: "Native share is not supported by this browser",
+      };
+    }
+  }
+  
+  return { available: true };
+}
+
+/**
+ * Get availability status for all platforms.
+ */
+export function getAllPlatformAvailability(): Record<ShareOption, PlatformAvailability> {
+  const platforms: ShareOption[] = [
+    "native", "copy", "download", "whatsapp", "telegram",
+    "instagram", "facebook", "snapchat", "sms", "email",
+    "linkedin", "reddit", "x", "tiktok", "threads",
+  ];
+  
+  const result: Partial<Record<ShareOption, PlatformAvailability>> = {};
+  for (const platform of platforms) {
+    result[platform] = checkPlatformAvailability(platform);
+  }
+  
+  return result as Record<ShareOption, PlatformAvailability>;
+}
+
+/**
+ * Log a warning to console when a platform is not available.
+ */
+export function warnUnavailablePlatform(platform: ShareOption, reason: string): void {
+  console.warn(
+    `[react-sharesheet] ${platform} sharing is not available: ${reason}. ` +
+    `This share option may not work correctly on this device.`
+  );
+}
+