react-sharesheet 1.8.0 → 1.9.0

package/dist/{platforms-BgGzSDRk.d.ts → platforms-BtmTZmgl.d.ts}

@@ -17,7 +17,7 @@ declare const CSS_VAR_UI_DEFAULTS: {
     readonly "--sharesheet-overlay-bg": "rgba(0, 0, 0, 0.7)";
     readonly "--sharesheet-drawer-bg": "#09090b";
     readonly "--sharesheet-drawer-border": "#27272a";
-    readonly "--sharesheet-handle-bg": "#27272a";
+    readonly "--sharesheet-handle-bg": "rgba(255, 255, 255, 0.2)";
     readonly "--sharesheet-title-color": "#ffffff";
     readonly "--sharesheet-subtitle-color": "#a1a1aa";
     readonly "--sharesheet-button-label-color": "#ffffff";
@@ -85,6 +85,12 @@ interface ShareSheetContentProps {
     downloadUrl?: string | null;
     /** Filename for downloaded file */
     downloadFilename?: string;
+    /** Custom preview image URL (skips OG fetching if provided) */
+    previewImage?: string | null;
+    /** File to share via native share (data URL or Blob) - takes priority over URL sharing */
+    shareFile?: string | Blob | null;
+    /** Filename for the shared file */
+    shareFilename?: string;
     /** Custom class name for the container (shorthand for classNames.root) */
     className?: string;
     /** Override class names for sub-components */
@@ -99,6 +105,8 @@ interface ShareSheetContentProps {
     onCopy?: () => void;
     /** Called when download starts */
     onDownload?: () => void;
+    /** Called on every share option click, with the option id (analytics-friendly) */
+    onShare?: (option: ShareOption) => void;
     /** Hide specific share options */
     hide?: ShareOption[];
     /** Show only these platforms, in this exact order */
@@ -199,7 +207,7 @@ declare const CSS_VAR_DEFAULTS: {
     readonly "--sharesheet-overlay-bg": "rgba(0, 0, 0, 0.7)";
     readonly "--sharesheet-drawer-bg": "#09090b";
     readonly "--sharesheet-drawer-border": "#27272a";
-    readonly "--sharesheet-handle-bg": "#27272a";
+    readonly "--sharesheet-handle-bg": "rgba(255, 255, 255, 0.2)";
     readonly "--sharesheet-title-color": "#ffffff";
     readonly "--sharesheet-subtitle-color": "#a1a1aa";
     readonly "--sharesheet-button-label-color": "#ffffff";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sharesheet",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A mobile-first share sheet for React with native share support, Open Graph previews, 15+ social platforms, and headless APIs. Tailwind-styled by default, fully customizable.",
   "publishConfig": {
     "access": "public",
@@ -35,6 +35,21 @@
       "require": "./dist/headless.js"
     }
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepack": "npm run clean && npm run build",
+    "prepublishOnly": "pnpm run type-check && pnpm run test && pnpm run build",
+    "publish-patch": "npm version patch && npm publish",
+    "publish-minor": "npm version minor && npm publish",
+    "publish-major": "npm version major && npm publish",
+    "release": "npm publish",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/gwendall/react-sharesheet.git"
@@ -85,18 +100,5 @@
     "dist",
     "src",
     "README.md"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "publish-patch": "npm version patch && npm publish",
-    "publish-minor": "npm version minor && npm publish",
-    "publish-major": "npm version major && npm publish",
-    "release": "npm publish",
-    "type-check": "tsc --noEmit",
-    "clean": "rm -rf dist"
-  }
-}
+  ]
+}

package/src/ShareSheetContent.tsx

@@ -28,9 +28,9 @@ const defaultClasses = {
   header: "text-center mb-2",
   title: "text-2xl font-black",
   subtitle: "mt-1 text-sm",
-  preview: "flex justify-center mb-4 px-4",
+  preview: "flex justify-center my-4 px-4",
   previewSkeleton: "rounded-xl overflow-hidden",
-  previewImage: "border border-white/10",
+  previewImage: "border border-white/10 rounded-xl",
   previewMeta: "",
   grid: "px-2 py-6 flex flex-row items-start gap-4 gap-y-6 flex-wrap justify-center",
   button: "flex flex-col items-center gap-0 text-xs w-[60px] outline-none cursor-pointer group",
@@ -64,12 +64,16 @@ export function ShareSheetContent({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   className,
   classNames = {},
   buttonSize = DEFAULT_BUTTON_SIZE,
   iconSize = DEFAULT_ICON_SIZE,
   onNativeShare,
   onCopy,
+  onShare,
   onDownload,
   hide = [],
   show,
@@ -79,8 +83,8 @@ export function ShareSheetContent({
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
 
-  // Fetch OG data automatically from shareUrl
-  const { ogData, loading: ogLoading } = useOGData(shareUrl);
+  // Only fetch OG data if previewImage is not provided
+  const { ogData, loading: ogLoading } = useOGData(previewImage ? undefined : shareUrl);
 
   const handleImageLoad = useCallback(() => {
     setImageLoaded(true);
@@ -96,6 +100,8 @@ export function ShareSheetContent({
     downloadUrl,
     downloadFilename,
     emailSubject: shareText,
+    shareFile,
+    shareFilename,
     onNativeShare,
     onCopy,
     onDownload,
@@ -151,11 +157,14 @@ export function ShareSheetContent({
         // Use CSS var with fallback to platform color
         bgColor: cssVar(PLATFORM_CSS_VARS[id], PLATFORM_COLORS[id].bg),
         textColor: PLATFORM_COLORS[id].text,
-        onClick: shareActions[id],
+        onClick: () => {
+          onShare?.(id);
+          shareActions[id]();
+        },
         condition,
       };
     });
-  }, [iconSize, labels, icons, dynamicLabels, shareActions, shareSheet.canNativeShare, shareSheet.platformAvailability, downloadUrl]);
+  }, [iconSize, labels, icons, dynamicLabels, shareActions, onShare, shareSheet.canNativeShare, shareSheet.platformAvailability, downloadUrl]);
 
   const visibleButtons = useMemo(() => {
     // If show is provided, use its order
@@ -184,11 +193,13 @@ export function ShareSheetContent({
 
   // Render OG preview
   const renderPreview = () => {
-    const ogImage = ogData?.image;
+    // Use previewImage if provided, otherwise use OG data
+    const ogImage = previewImage || ogData?.image;
     const hasImage = ogImage && !imageError;
+    const isLoading = !previewImage && ogLoading;
 
-    // Loading state
-    if (ogLoading) {
+    // Loading state (only when fetching OG data, not when previewImage is provided)
+    if (isLoading) {
       return (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
           <div
@@ -221,8 +232,8 @@ export function ShareSheetContent({
       );
     }
 
-    // No OG data or no image - show link placeholder
-    if (!ogData || !hasImage) {
+    // No image available - show link placeholder (skip if previewImage was provided)
+    if (!hasImage) {
       return (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
           <div
@@ -274,7 +285,27 @@ export function ShareSheetContent({
       );
     }
 
-    // Image loading state
+    // If previewImage is a data URL, show it directly (no preloading needed)
+    const isDataUrl = typeof ogImage === "string" && ogImage.startsWith("data:");
+    if (isDataUrl) {
+      return (
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={ogImage}
+            alt="Preview"
+            className={cn(defaultClasses.previewImage, classNames.previewImage)}
+            style={{
+              width: "100%",
+              maxWidth: "320px",
+              height: "auto",
+            }}
+          />
+        </div>
+      );
+    }
+
+    // Image loading state (for remote URLs)
     if (!imageLoaded) {
       return (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
@@ -308,7 +339,7 @@ export function ShareSheetContent({
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={ogImage}
-            alt={ogData.title || "Preview"}
+            alt={ogData?.title || "Preview"}
             onLoad={handleImageLoad}
             onError={handleImageError}
             style={{ display: "none" }}
@@ -323,13 +354,12 @@ export function ShareSheetContent({
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={ogImage}
-          alt={ogData.title || "Preview"}
+          alt={ogData?.title || "Preview"}
           className={cn(defaultClasses.previewImage, classNames.previewImage, "sharesheet-fadein")}
           style={{
             width: "100%",
             maxWidth: "320px",
             height: "auto",
-            borderRadius: "12px",
           }}
         />
       </div>

package/src/ShareSheetDrawer.tsx

@@ -40,6 +40,9 @@ export function ShareSheetDrawer({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   disabled,
   children,
   open: controlledOpen,
@@ -111,6 +114,9 @@ export function ShareSheetDrawer({
               shareText={shareText}
               downloadUrl={downloadUrl}
               downloadFilename={downloadFilename}
+              previewImage={previewImage}
+              shareFile={shareFile}
+              shareFilename={shareFilename}
               className={className}
               classNames={classNames}
               buttonSize={buttonSize}

package/src/hooks.ts

@@ -50,6 +50,10 @@ export interface UseShareSheetOptions {
   downloadFilename?: string;
   /** Email subject (optional) */
   emailSubject?: string;
+  /** File to share via native share (data URL or Blob) - takes priority over URL sharing */
+  shareFile?: string | Blob | null;
+  /** Filename for the shared file */
+  shareFilename?: string;
   /** Callback after native share */
   onNativeShare?: () => void;
   /** Callback after copy */
@@ -68,6 +72,8 @@ export function useShareSheet({
   downloadUrl,
   downloadFilename,
   emailSubject = "Share",
+  shareFile,
+  shareFilename = "share.png",
   onNativeShare,
   onCopy,
   onDownload,
@@ -105,12 +111,64 @@ export function useShareSheet({
   }, [safeUrl, onCopy]);
 
   const nativeShare = useCallback(async () => {
-    if (!safeUrl) return;
     const nav = navigator as Navigator & {
       share?: (data: ShareData) => Promise<void>;
+      canShare?: (data: ShareData) => boolean;
     };
     if (!("share" in nav) || typeof nav.share !== "function") return;
+
     try {
+      // If shareFile is provided, try to share as a file
+      if (shareFile) {
+        let blob: Blob;
+
+        // Convert data URL to Blob if needed
+        if (typeof shareFile === "string" && shareFile.startsWith("data:")) {
+          const response = await fetch(shareFile);
+          blob = await response.blob();
+        } else if (shareFile instanceof Blob) {
+          blob = shareFile;
+        } else {
+          // Invalid shareFile, fall back to URL sharing
+          if (!safeUrl) return;
+          await nav.share({
+            title: shareText,
+            text: shareText,
+            url: safeUrl,
+          });
+          onNativeShare?.();
+          return;
+        }
+
+        // Create a File from the Blob
+        const file = new File([blob], shareFilename, { type: blob.type || "image/png" });
+
+        // Check if file sharing is supported
+        const shareData: ShareData = {
+          files: [file],
+          title: shareText,
+          text: shareText,
+        };
+
+        if (nav.canShare && !nav.canShare(shareData)) {
+          // File sharing not supported, fall back to URL sharing
+          if (!safeUrl) return;
+          await nav.share({
+            title: shareText,
+            text: shareText,
+            url: safeUrl,
+          });
+          onNativeShare?.();
+          return;
+        }
+
+        await nav.share(shareData);
+        onNativeShare?.();
+        return;
+      }
+
+      // Fall back to URL sharing
+      if (!safeUrl) return;
       await nav.share({
         title: shareText,
         text: shareText,
@@ -120,7 +178,7 @@ export function useShareSheet({
     } catch {
       // user canceled or share failed -> ignore
     }
-  }, [safeUrl, shareText, onNativeShare]);
+  }, [safeUrl, shareText, shareFile, shareFilename, onNativeShare]);
 
   const downloadFile = useCallback(async () => {
     const url = (downloadUrl ?? "").trim();

package/src/types.ts

@@ -21,7 +21,7 @@ export const CSS_VAR_UI_DEFAULTS = {
   [CSS_VARS_UI.overlayBg]: "rgba(0, 0, 0, 0.7)",
   [CSS_VARS_UI.drawerBg]: "#09090b",
   [CSS_VARS_UI.drawerBorder]: "#27272a",
-  [CSS_VARS_UI.handleBg]: "#27272a",
+  [CSS_VARS_UI.handleBg]: "rgba(255, 255, 255, 0.2)",
   [CSS_VARS_UI.titleColor]: "#ffffff",
   [CSS_VARS_UI.subtitleColor]: "#a1a1aa",
   [CSS_VARS_UI.buttonLabelColor]: "#ffffff",
@@ -108,6 +108,12 @@ export interface ShareSheetContentProps {
   downloadUrl?: string | null;
   /** Filename for downloaded file */
   downloadFilename?: string;
+  /** Custom preview image URL (skips OG fetching if provided) */
+  previewImage?: string | null;
+  /** File to share via native share (data URL or Blob) - takes priority over URL sharing */
+  shareFile?: string | Blob | null;
+  /** Filename for the shared file */
+  shareFilename?: string;
   /** Custom class name for the container (shorthand for classNames.root) */
   className?: string;
   /** Override class names for sub-components */
@@ -122,6 +128,8 @@ export interface ShareSheetContentProps {
   onCopy?: () => void;
   /** Called when download starts */
   onDownload?: () => void;
+  /** Called on every share option click, with the option id (analytics-friendly) */
+  onShare?: (option: ShareOption) => void;
   /** Hide specific share options */
   hide?: ShareOption[];
   /** Show only these platforms, in this exact order */