react-sharesheet 1.1.0 → 1.3.0

package/README.md

@@ -3,22 +3,24 @@
 [![npm version](https://img.shields.io/npm/v/react-sharesheet.svg)](https://www.npmjs.com/package/react-sharesheet)
 [![npm downloads](https://img.shields.io/npm/dm/react-sharesheet.svg)](https://www.npmjs.com/package/react-sharesheet)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Demo](https://img.shields.io/badge/demo-live-brightgreen.svg)](https://react-sharesheet.vercel.app)
+[![Demo](https://img.shields.io/badge/demo-live-brightgreen.svg)](https://sharesheet.gwendall.com)
 
-A beautiful, fully customizable share sheet component for React. Supports 15+ social platforms with a modern drawer UI, CSS variable theming, and headless mode for complete control.
+A mobile-first share sheet for React with native share support, built-in Open Graph previews, and 15+ social platforms.
 
-**[🚀 Live Demo](https://react-sharesheet.vercel.app)**
+Designed for modern React apps, react-sharesheet ships with a beautiful Tailwind-based drawer UI out of the box, while also exposing fully headless APIs for complete customization.
 
-## ✨ Features
+**[→ Live Demo](https://sharesheet.gwendall.com)**
 
-- 🎨 **Fully themeable** — CSS variables + Tailwind class overrides
-- 🧩 **Headless mode** — Use the hook to build your own UI
-- 📱 **Mobile-first** — Beautiful drawer with native share API support
-- 🔧 **Customizable** — Hide/show platforms, custom labels & icons
-- 📦 **Tree-shakeable** — Import only what you need
-- 🌐 **15+ platforms** — WhatsApp, X, Telegram, Instagram, and more
+## Why react-sharesheet?
 
-## 📦 Installation
+- 📱 **Mobile-first drawer UI** - feels native on iOS & Android
+- 🔗 **Native Web Share API** - fallback handled automatically
+- 🖼 **Built-in Open Graph previews** - no extra setup
+- 🧠 **Headless APIs** - build your own UI if needed
+- 🎨 **Themeable** - CSS variables + Tailwind class overrides
+- 🌍 **15+ social platforms** - WhatsApp, X, Telegram, Instagram, and more
+
+## Installation
 
 ```bash
 npm install react-sharesheet
@@ -43,13 +45,13 @@ Add the package to your `tailwind.config.js` content array:
 module.exports = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/react-sharesheet/dist/**/*.{js,mjs}", // 👈 Add this
+    "./node_modules/react-sharesheet/dist/**/*.{js,mjs}", // <-- Add this
   ],
   // ...
 }
 ```
 
-## 🚀 Quick Start
+## Quick Start
 
 ### Full Drawer (recommended)
 
@@ -115,9 +117,9 @@ function CustomShareUI() {
 }
 ```
 
-## 🖼️ Automatic Link Preview
+## Automatic Link Preview
 
-The share sheet automatically fetches Open Graph (OG) metadata from the `shareUrl` and displays a rich preview — just like Twitter, Telegram, and other platforms do when you paste a link.
+The share sheet automatically fetches Open Graph (OG) metadata from the `shareUrl` and displays a rich preview - just like Twitter, Telegram, and other platforms do when you paste a link.
 
 ```tsx
 <ShareSheetDrawer
@@ -168,7 +170,7 @@ interface OGData {
 }
 ```
 
-## 🎨 Theming
+## Theming
 
 ### CSS Variables
 
@@ -275,7 +277,7 @@ Override any part of the component with `classNames`:
 >
 ```
 
-## ⚙️ API Reference
+## API Reference
 
 ### Props
 
@@ -286,19 +288,19 @@ Override any part of the component with `classNames`:
 | `title` | `string` | `"Share"` | Title displayed at the top |
 | `shareUrl` | `string` | **required** | URL to share (OG preview fetched automatically) |
 | `shareText` | `string` | **required** | Text to share |
-| `downloadUrl` | `string` | — | URL for download button |
-| `downloadFilename` | `string` | — | Filename for download |
-| `className` | `string` | — | Class for root container |
-| `classNames` | `object` | — | Override sub-component classes |
+| `downloadUrl` | `string` | - | URL for download button |
+| `downloadFilename` | `string` | - | Filename for download |
+| `className` | `string` | - | Class for root container |
+| `classNames` | `object` | - | Override sub-component classes |
 | `buttonSize` | `number` | `45` | Button size in pixels |
 | `iconSize` | `number` | `22` | Icon size in pixels |
-| `show` | `ShareOption[]` | — | Only show these platforms |
-| `hide` | `ShareOption[]` | — | Hide these platforms |
-| `labels` | `object` | — | Custom button labels |
-| `icons` | `object` | — | Custom button icons |
-| `onNativeShare` | `() => void` | — | Native share callback |
-| `onCopy` | `() => void` | — | Copy callback |
-| `onDownload` | `() => void` | — | Download callback |
+| `show` | `ShareOption[]` | - | Only show these platforms |
+| `hide` | `ShareOption[]` | - | Hide these platforms |
+| `labels` | `object` | - | Custom button labels |
+| `icons` | `object` | - | Custom button icons |
+| `onNativeShare` | `() => void` | - | Native share callback |
+| `onCopy` | `() => void` | - | Copy callback |
+| `onDownload` | `() => void` | - | Download callback |
 
 #### ShareSheetDrawer (additional)
 
@@ -306,8 +308,8 @@ Override any part of the component with `classNames`:
 |------|------|---------|-------------|
 | `children` | `ReactNode` | **required** | Trigger element |
 | `disabled` | `boolean` | `false` | Disable the trigger |
-| `open` | `boolean` | — | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | — | Open state callback |
+| `open` | `boolean` | - | Controlled open state |
+| `onOpenChange` | `(open: boolean) => void` | - | Open state callback |
 
 ### ShareOption
 
@@ -371,7 +373,7 @@ const {
 });
 ```
 
-## 📦 Exports
+## Exports
 
 ```ts
 // Everything
@@ -412,7 +414,7 @@ import {
 } from "react-sharesheet/headless";
 ```
 
-## 🎨 Platform Utilities
+## Platform Utilities
 
 Access platform colors, icons, and labels for custom UIs:
 
@@ -465,7 +467,7 @@ function WhatsAppButton({ url, text }: { url: string; text: string }) {
 }
 ```
 
-## 🛠 Examples
+## Examples
 
 ### Filter platforms
 
@@ -534,35 +536,28 @@ function ControlledExample() {
 }
 ```
 
-## 📋 Requirements
-
-- React 18+
-- Tailwind CSS (for default styling)
+## Styling & Tailwind
 
-> **Note:** If you're not using Tailwind, you can use the headless hook to build your own UI, or override all classes via `classNames`.
+react-sharesheet ships with a Tailwind-based UI by default.
 
-## 🔄 Migration from v0.x
+Tailwind is **only required if you use the prebuilt components**.  
+If you don't use Tailwind, you can:
 
-If you're upgrading from `@gwendall/share-menu`:
+- Use the **headless hook** to build your own UI
+- Override all styles via `classNames`
+- Use the exposed CSS variables
 
-```tsx
-// Old imports
-import { ShareMenuDrawer, ShareMenuContent, useShareMenu } from "@gwendall/share-menu";
+This makes react-sharesheet easy to integrate into any React stack.
 
-// New imports (backwards compatible aliases available)
-import { ShareSheetDrawer, ShareSheetContent, useShareSheet } from "react-sharesheet";
+## Requirements
 
-// CSS variables changed from --share-menu-* to --sharesheet-*
-// Old: --share-menu-drawer-bg
-// New: --sharesheet-drawer-bg
-```
-
-Legacy exports (`ShareMenuDrawer`, `ShareMenuContent`, `useShareMenu`) are still available but deprecated.
+- React 18+
+- Tailwind CSS (only for prebuilt components)
 
-## 🤝 Contributing
+## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
-## 📄 License
+## License
 
 MIT © [Gwendall](https://github.com/gwendall)

package/dist/content.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as ShareSheetContentProps } from './platforms-CDJmSY8E.mjs';
-export { l as CSS_VARS, C as CSS_VARS_UI, m as CSS_VAR_DEFAULTS, k as CSS_VAR_UI_DEFAULTS, o as PLATFORM_COLORS, r as PLATFORM_CSS_VARS, f as ShareMenuContentClassNames, d as ShareMenuContentProps, h as ShareOption, b as ShareSheetContentClassNames } from './platforms-CDJmSY8E.mjs';
+import { S as ShareSheetContentProps } from './platforms-omqzPfYX.mjs';
+export { l as CSS_VARS, C as CSS_VARS_UI, m as CSS_VAR_DEFAULTS, k as CSS_VAR_UI_DEFAULTS, p as PLATFORM_COLORS, s as PLATFORM_CSS_VARS, f as ShareMenuContentClassNames, d as ShareMenuContentProps, h as ShareOption, b as ShareSheetContentClassNames } from './platforms-omqzPfYX.mjs';
 import 'react';
 
 declare function ShareSheetContent({ title, shareUrl, shareText, downloadUrl, downloadFilename, className, classNames, buttonSize, iconSize, onNativeShare, onCopy, onDownload, hide, show, labels, icons, }: ShareSheetContentProps): react_jsx_runtime.JSX.Element;

package/dist/content.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as ShareSheetContentProps } from './platforms-CDJmSY8E.js';
-export { l as CSS_VARS, C as CSS_VARS_UI, m as CSS_VAR_DEFAULTS, k as CSS_VAR_UI_DEFAULTS, o as PLATFORM_COLORS, r as PLATFORM_CSS_VARS, f as ShareMenuContentClassNames, d as ShareMenuContentProps, h as ShareOption, b as ShareSheetContentClassNames } from './platforms-CDJmSY8E.js';
+import { S as ShareSheetContentProps } from './platforms-omqzPfYX.js';
+export { l as CSS_VARS, C as CSS_VARS_UI, m as CSS_VAR_DEFAULTS, k as CSS_VAR_UI_DEFAULTS, p as PLATFORM_COLORS, s as PLATFORM_CSS_VARS, f as ShareMenuContentClassNames, d as ShareMenuContentProps, h as ShareOption, b as ShareSheetContentClassNames } from './platforms-omqzPfYX.js';
 import 'react';
 
 declare function ShareSheetContent({ title, shareUrl, shareText, downloadUrl, downloadFilename, className, classNames, buttonSize, iconSize, onNativeShare, onCopy, onDownload, hide, show, labels, icons, }: ShareSheetContentProps): react_jsx_runtime.JSX.Element;

package/dist/content.js

@@ -33,7 +33,7 @@ module.exports = __toCommonJS(content_exports);
 
 // src/ShareSheetContent.tsx
 var import_react2 = require("react");
-var import_lucide_react2 = require("lucide-react");
+var import_lu2 = require("react-icons/lu");
 
 // src/utils.ts
 var import_clsx = require("clsx");
@@ -47,6 +47,75 @@ function openUrl(url) {
 function getSafeUrl(shareUrl) {
   return shareUrl || (typeof window !== "undefined" ? window.location.href : "");
 }
+function isMobileDevice() {
+  if (typeof navigator === "undefined") return false;
+  const userAgent = navigator.userAgent || navigator.vendor || "";
+  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+  const hasTouch = typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  return mobileRegex.test(userAgent);
+}
+var MOBILE_ONLY_PLATFORMS = [
+  "instagram",
+  "tiktok",
+  "threads",
+  "sms"
+];
+function checkPlatformAvailability(platform) {
+  const isMobile = isMobileDevice();
+  if (MOBILE_ONLY_PLATFORMS.includes(platform)) {
+    if (!isMobile) {
+      return {
+        available: false,
+        reason: `${platform} requires a mobile device with the app installed`
+      };
+    }
+  }
+  if (platform === "sms" && !isMobile) {
+    return {
+      available: false,
+      reason: "SMS sharing requires a mobile device"
+    };
+  }
+  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 };
+}
+function getAllPlatformAvailability() {
+  const platforms = [
+    "native",
+    "copy",
+    "download",
+    "whatsapp",
+    "telegram",
+    "instagram",
+    "facebook",
+    "snapchat",
+    "sms",
+    "email",
+    "linkedin",
+    "reddit",
+    "x",
+    "tiktok",
+    "threads"
+  ];
+  const result = {};
+  for (const platform of platforms) {
+    result[platform] = checkPlatformAvailability(platform);
+  }
+  return result;
+}
+function warnUnavailablePlatform(platform, reason) {
+  console.warn(
+    `[react-sharesheet] ${platform} sharing is not available: ${reason}. This share option may not work correctly on this device.`
+  );
+}
 
 // src/hooks.ts
 var import_react = require("react");
@@ -104,12 +173,24 @@ function shareToFacebook(url) {
   openUrl(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`);
 }
 function openInstagram() {
+  const availability = checkPlatformAvailability("instagram");
+  if (!availability.available) {
+    warnUnavailablePlatform("instagram", availability.reason);
+  }
   window.location.href = "instagram://";
 }
 function openTikTok() {
+  const availability = checkPlatformAvailability("tiktok");
+  if (!availability.available) {
+    warnUnavailablePlatform("tiktok", availability.reason);
+  }
   window.location.href = "tiktok://";
 }
 function openThreads() {
+  const availability = checkPlatformAvailability("threads");
+  if (!availability.available) {
+    warnUnavailablePlatform("threads", availability.reason);
+  }
   window.location.href = "threads://";
 }
 function shareToSnapchat(url) {
@@ -117,6 +198,10 @@ function shareToSnapchat(url) {
   openUrl(`https://www.snapchat.com/scan?attachmentUrl=${encodedUrl}`);
 }
 function shareViaSMS(url, text) {
+  const availability = checkPlatformAvailability("sms");
+  if (!availability.available) {
+    warnUnavailablePlatform("sms", availability.reason);
+  }
   const body = encodeURIComponent(`${text}
 ${url}`);
   window.location.href = `sms:?body=${body}`;
@@ -139,6 +224,23 @@ function shareToReddit(url, text) {
 }
 
 // src/hooks.ts
+var DEFAULT_PLATFORM_AVAILABILITY = {
+  native: { available: true },
+  copy: { available: true },
+  download: { available: true },
+  whatsapp: { available: true },
+  telegram: { available: true },
+  instagram: { available: true },
+  facebook: { available: true },
+  snapchat: { available: true },
+  sms: { available: true },
+  email: { available: true },
+  linkedin: { available: true },
+  reddit: { available: true },
+  x: { available: true },
+  tiktok: { available: true },
+  threads: { available: true }
+};
 function useShareSheet({
   shareUrl,
   shareText,
@@ -151,8 +253,15 @@ function useShareSheet({
 }) {
   const [copied, setCopied] = (0, import_react.useState)(false);
   const [downloading, setDownloading] = (0, import_react.useState)(false);
-  const canNativeShare = (0, import_react.useMemo)(() => {
-    return typeof navigator !== "undefined" && "share" in navigator;
+  const [canNativeShare, setCanNativeShare] = (0, import_react.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react.useState)(false);
+  const [platformAvailability, setPlatformAvailability] = (0, import_react.useState)(
+    DEFAULT_PLATFORM_AVAILABILITY
+  );
+  (0, import_react.useEffect)(() => {
+    setCanNativeShare(typeof navigator !== "undefined" && "share" in navigator);
+    setIsMobile(isMobileDevice());
+    setPlatformAvailability(getAllPlatformAvailability());
   }, []);
   const safeUrl = getSafeUrl(shareUrl);
   const copyLink = (0, import_react.useCallback)(async () => {
@@ -242,6 +351,8 @@ function useShareSheet({
     copied,
     downloading,
     safeUrl,
+    isMobile,
+    platformAvailability,
     copyLink,
     nativeShare,
     downloadFile,
@@ -292,7 +403,7 @@ function useOGData(url) {
 }
 
 // src/platforms.tsx
-var import_lucide_react = require("lucide-react");
+var import_lu = require("react-icons/lu");
 var import_fa = require("react-icons/fa");
 var import_fa6 = require("react-icons/fa6");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -348,16 +459,16 @@ var PLATFORM_LABELS = {
   threads: "Threads"
 };
 var PLATFORM_ICONS = {
-  native: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Send, { size, className }),
-  copy: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Link, { size, className }),
-  download: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Download, { size, className }),
+  native: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lu.LuSend, { size, className }),
+  copy: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lu.LuLink, { size, className }),
+  download: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lu.LuDownload, { size, className }),
   whatsapp: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaWhatsapp, { size, className }),
   telegram: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaTelegramPlane, { size, className }),
   instagram: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaInstagram, { size, className }),
   facebook: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaFacebookF, { size, className }),
   snapchat: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa6.FaSnapchat, { size, className }),
-  sms: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageCircle, { size, className }),
-  email: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Mail, { size, className }),
+  sms: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lu.LuMessageCircle, { size, className }),
+  email: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lu.LuMail, { size, className }),
   linkedin: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaLinkedin, { size, className }),
   reddit: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaReddit, { size, className }),
   x: ({ size = 22, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa6.FaXTwitter, { size, className }),
@@ -512,6 +623,15 @@ function ShareSheetContent({
     return PLATFORM_IDS.map((id) => {
       const Icon = PLATFORM_ICONS[id];
       const defaultLabel = dynamicLabels[id] ?? PLATFORM_LABELS[id];
+      const availability = shareSheet.platformAvailability[id];
+      let condition = true;
+      if (id === "native") {
+        condition = shareSheet.canNativeShare;
+      } else if (id === "download") {
+        condition = !!downloadUrl;
+      } else if (!availability.available) {
+        condition = false;
+      }
       return {
         id,
         label: labels[id] ?? defaultLabel,
@@ -520,11 +640,10 @@ function ShareSheetContent({
         bgColor: cssVar(PLATFORM_CSS_VARS[id], PLATFORM_COLORS[id].bg),
         textColor: PLATFORM_COLORS[id].text,
         onClick: shareActions[id],
-        // Conditions for showing certain buttons
-        condition: id === "native" ? shareSheet.canNativeShare : id === "download" ? !!downloadUrl : true
+        condition
       };
     });
-  }, [iconSize, labels, icons, dynamicLabels, shareActions, shareSheet.canNativeShare, downloadUrl]);
+  }, [iconSize, labels, icons, dynamicLabels, shareActions, shareSheet.canNativeShare, shareSheet.platformAvailability, downloadUrl]);
   const visibleButtons = (0, import_react2.useMemo)(() => {
     return buttons.filter((btn) => {
       if (btn.condition === false) return false;
@@ -567,7 +686,7 @@ function ShareSheetContent({
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Link2, { size: 32, style: { color: textColor, opacity: 0.4 } })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lu2.LuLink2, { size: 32, style: { color: textColor, opacity: 0.4 } })
           ]
         }
       ) });
@@ -600,7 +719,7 @@ function ShareSheetContent({
                 padding: "16px"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Link2, { size: 32, style: { color: textColor, opacity: 0.4 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lu2.LuLink2, { size: 32, style: { color: textColor, opacity: 0.4 } }),
                 ogData?.title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "span",
                   {
@@ -654,7 +773,7 @@ function ShareSheetContent({
                   }
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Image, { size: 32, style: { color: textColor, opacity: 0.4 } })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lu2.LuImage, { size: 32, style: { color: textColor, opacity: 0.4 } })
             ]
           }
         ),