react-sharesheet 1.7.0 → 1.9.0

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

@@ -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/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.7.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",
@@ -42,7 +42,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "prepack": "npm run clean && npm run build",
-    "prepublishOnly": "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",

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",
@@ -38,12 +38,19 @@ const defaultClasses = {
   buttonLabel: "",
 };
 
-// Shimmer keyframes as inline style
+// Shimmer and fade-in keyframes as inline style
 const shimmerKeyframes = `
 @keyframes sharesheet-shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
 }
+@keyframes sharesheet-fadein {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+.sharesheet-fadein {
+  animation: sharesheet-fadein 0.3s ease-out forwards;
+}
 `;
 
 // Helper to create var() with fallback
@@ -57,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,
@@ -72,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);
@@ -89,6 +100,8 @@ export function ShareSheetContent({
     downloadUrl,
     downloadFilename,
     emailSubject: shareText,
+    shareFile,
+    shareFilename,
     onNativeShare,
     onCopy,
     onDownload,
@@ -144,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
@@ -177,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
@@ -214,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
@@ -267,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%" }}>
@@ -301,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" }}
@@ -310,21 +348,18 @@ export function ShareSheetContent({
       );
     }
 
-    // Image loaded - show it
+    // Image loaded - show it with fade-in
     return (
       <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={ogImage}
-          alt={ogData.title || "Preview"}
-          className={cn(defaultClasses.previewImage, classNames.previewImage)}
+          alt={ogData?.title || "Preview"}
+          className={cn(defaultClasses.previewImage, classNames.previewImage, "sharesheet-fadein")}
           style={{
             width: "100%",
             maxWidth: "320px",
             height: "auto",
-            borderRadius: "12px",
-            opacity: 1,
-            transition: "opacity 0.3s ease-in-out",
           }}
         />
       </div>

package/src/ShareSheetDrawer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import { Drawer } from "vaul";
 
 import { cn } from "./utils";
@@ -21,12 +21,28 @@ function cssVar(name: string, fallback: string): string {
   return `var(${name}, ${fallback})`;
 }
 
+// Screen reader only styles (inline to avoid Tailwind dependency)
+const srOnlyStyle: React.CSSProperties = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0,
+};
+
 export function ShareSheetDrawer({
   title = "Share",
   shareUrl,
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   disabled,
   children,
   open: controlledOpen,
@@ -78,7 +94,7 @@ export function ShareSheetDrawer({
             borderColor: cssVar(CSS_VARS_UI.drawerBorder, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBorder]),
           }}
         >
-          <Drawer.Title className="sr-only">{title}</Drawer.Title>
+          <Drawer.Title style={srOnlyStyle}>{title}</Drawer.Title>
           <div
             className={cn(defaultDrawerClasses.drawerInner, classNames.drawerInner)}
             style={{
@@ -98,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 */