react-sharesheet 1.1.0 → 1.2.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

@@ -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}`;
@@ -154,6 +239,12 @@ function useShareSheet({
   const canNativeShare = (0, import_react.useMemo)(() => {
     return typeof navigator !== "undefined" && "share" in navigator;
   }, []);
+  const isMobile = (0, import_react.useMemo)(() => {
+    return isMobileDevice();
+  }, []);
+  const platformAvailability = (0, import_react.useMemo)(() => {
+    return getAllPlatformAvailability();
+  }, []);
   const safeUrl = getSafeUrl(shareUrl);
   const copyLink = (0, import_react.useCallback)(async () => {
     if (!safeUrl) return;
@@ -242,6 +333,8 @@ function useShareSheet({
     copied,
     downloading,
     safeUrl,
+    isMobile,
+    platformAvailability,
     copyLink,
     nativeShare,
     downloadFile,
@@ -512,6 +605,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 +622,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;