react-sharesheet 1.0.0 → 1.2.0

package/README.md

@@ -3,19 +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://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.
 
-## ✨ Features
+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.
 
-- 🎨 **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
+**[→ Live Demo](https://sharesheet.gwendall.com)**
 
-## 📦 Installation
+## Why react-sharesheet?
+
+- 📱 **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
@@ -40,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)
 
@@ -112,75 +117,60 @@ function CustomShareUI() {
 }
 ```
 
-## 🖼️ Content Preview
+## Automatic Link Preview
 
-The share sheet can display a preview of the content being shared. It automatically detects the content type based on the URL and displays an appropriate preview.
-
-### Auto-detection
+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
-// Image preview (detected from extension)
-<ShareSheetDrawer preview="https://example.com/image.png" {...props} />
-
-// Video preview (detected from extension)
-<ShareSheetDrawer preview="https://example.com/video.mp4" {...props} />
+<ShareSheetDrawer
+  shareUrl="https://gwendall.com"  // OG data fetched automatically!
+  shareText="Check out this site!"
+>
+  <button>Share</button>
+</ShareSheetDrawer>
+```
 
-// Audio file (shows icon + filename)
-<ShareSheetDrawer preview="https://example.com/song.mp3" {...props} />
+The component will:
+1. Fetch OG metadata (title, description, image) from the URL
+2. Display a loading shimmer while fetching
+3. Show the OG image if available, or a placeholder with the page title
 
-// Link (shows link icon + URL)
-<ShareSheetDrawer preview="https://example.com/page" {...props} />
-```
+### Using the OG Hook Directly
 
-### Explicit Type
+You can also use the `useOGData` hook for custom implementations:
 
 ```tsx
-// Force image type (e.g., for API endpoints)
-<ShareSheetDrawer
-  preview={{ url: "/api/og?id=123", type: "image" }}
-  {...props}
-/>
+import { useOGData } from "react-sharesheet/headless";
 
-// Video with poster image
-<ShareSheetDrawer
-  preview={{
-    url: "https://example.com/video.mp4",
-    type: "video",
-    poster: "https://example.com/thumbnail.jpg"
-  }}
-  {...props}
-/>
+function CustomPreview({ url }: { url: string }) {
+  const { ogData, loading, error } = useOGData(url);
 
-// File with custom filename
-<ShareSheetDrawer
-  preview={{
-    url: "https://example.com/doc.pdf",
-    type: "file",
-    filename: "Report Q4 2024.pdf"
-  }}
-  {...props}
-/>
+  if (loading) return <div>Loading...</div>;
+  if (!ogData) return <div>No preview available</div>;
+
+  return (
+    <div>
+      {ogData.image && <img src={ogData.image} alt={ogData.title} />}
+      <h3>{ogData.title}</h3>
+      <p>{ogData.description}</p>
+    </div>
+  );
+}
 ```
 
-### PreviewConfig
+### OGData Type
 
 ```ts
-interface PreviewConfig {
-  url: string;              // URL of the content
-  type?: PreviewType;       // "image" | "video" | "audio" | "file" | "link" | "auto"
-  filename?: string;        // Display name for file/audio types
-  alt?: string;             // Alt text for images
-  poster?: string;          // Poster image for videos
+interface OGData {
+  title?: string;       // Page title
+  description?: string; // Page description
+  image?: string;       // OG image URL
+  url?: string;         // Canonical URL
+  siteName?: string;    // Site name
 }
 ```
 
-### Supported Formats
-
-- **Images**: jpg, jpeg, png, gif, webp, svg, bmp, ico, avif
-- **Videos**: mp4, webm, mov, avi, mkv, m4v, ogv
-- **Audio**: mp3, wav, ogg, m4a, aac, flac, wma
-
-## 🎨 Theming
+## Theming
 
 ### CSS Variables
 
@@ -287,7 +277,7 @@ Override any part of the component with `classNames`:
 >
 ```
 
-## ⚙️ API Reference
+## API Reference
 
 ### Props
 
@@ -296,22 +286,21 @@ Override any part of the component with `classNames`:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | `string` | `"Share"` | Title displayed at the top |
-| `shareUrl` | `string` | **required** | URL to share |
+| `shareUrl` | `string` | **required** | URL to share (OG preview fetched automatically) |
 | `shareText` | `string` | **required** | Text to share |
-| `preview` | `string \| PreviewConfig` | — | Preview of content (see Preview section below) |
-| `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)
 
@@ -319,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
 
@@ -384,7 +373,7 @@ const {
 });
 ```
 
-## 📦 Exports
+## Exports
 
 ```ts
 // Everything
@@ -425,7 +414,7 @@ import {
 } from "react-sharesheet/headless";
 ```
 
-## 🎨 Platform Utilities
+## Platform Utilities
 
 Access platform colors, icons, and labels for custom UIs:
 
@@ -478,7 +467,7 @@ function WhatsAppButton({ url, text }: { url: string; text: string }) {
 }
 ```
 
-## 🛠 Examples
+## Examples
 
 ### Filter platforms
 
@@ -547,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,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as ShareSheetContentProps } from './platforms-DU1DVDFq.mjs';
-export { m as CSS_VARS, C as CSS_VARS_UI, n as CSS_VAR_DEFAULTS, l as CSS_VAR_UI_DEFAULTS, q as PLATFORM_COLORS, t as PLATFORM_CSS_VARS, f as ShareMenuContentClassNames, d as ShareMenuContentProps, h as ShareOption, b as ShareSheetContentClassNames } from './platforms-DU1DVDFq.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, preview, downloadUrl, downloadFilename, className, classNames, buttonSize, iconSize, onNativeShare, onCopy, onDownload, hide, show, labels, icons, }: ShareSheetContentProps): react_jsx_runtime.JSX.Element;
+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;
 /** @deprecated Use ShareSheetContent instead */
 declare const ShareMenuContent: typeof ShareSheetContent;
 

package/dist/content.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as ShareSheetContentProps } from './platforms-DU1DVDFq.js';
-export { m as CSS_VARS, C as CSS_VARS_UI, n as CSS_VAR_DEFAULTS, l as CSS_VAR_UI_DEFAULTS, q as PLATFORM_COLORS, t as PLATFORM_CSS_VARS, f as ShareMenuContentClassNames, d as ShareMenuContentProps, h as ShareOption, b as ShareSheetContentClassNames } from './platforms-DU1DVDFq.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, preview, downloadUrl, downloadFilename, className, classNames, buttonSize, iconSize, onNativeShare, onCopy, onDownload, hide, show, labels, icons, }: ShareSheetContentProps): react_jsx_runtime.JSX.Element;
+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;
 /** @deprecated Use ShareSheetContent instead */
 declare const ShareMenuContent: typeof ShareSheetContent;