Loading...
Please waitLoading...
Please waitWrapper around navigator.share() with a simple share(data) helper and ergonomic fallbacks when the Web Share API is unavailable.
pnpm dlx uselab@latest add use-native-share
import * as React from "react"
import { useNativeShare } from "@/hooks/use-native-share"
export function ShareButton() {
const { canShare, isSharing, error, share } = useNativeShare()
const handleClick = async () => {
await share({
title: "Check this out",
text: "Found a neat hook collection.",
url: "https://usekit.kiron.dev",
})
}
return (
<div className="space-y-2">
<button onClick={handleClick} disabled={!canShare || isSharing}>
{isSharing ? "Sharing…" : "Share"}
</button>
{!canShare && (
<p className="text-xs text-muted-foreground">
Native sharing is not supported in this browser.
</p>
)}
{error && <p className="text-xs text-destructive">{error.message}</p>}
</div>
)
}useNativeShare(options?)| Name | Type | Description | Optional |
|---|---|---|---|
options | UseNativeShareOptions | Configuration object for customizing fallback behavior. | Yes |
onFallback | (data: ShareData) => void | Promise<void> | Called when native share is unavailable or not allowed; ideal for clipboard or “copy link” fallbacks. | Yes |
The hook returns an object { canShare, isSharing, error, share }:
| Name | Type | Description |
|---|---|---|
canShare | boolean | true when navigator.share is available in the current environment. |
isSharing | boolean | true while a share attempt is in-flight. |
error | Error | null | Last non-cancellation error thrown by share(data), if any. |
share | (data: ShareData) => Promise<void> | Attempts to use navigator.share, then falls back to onFallback when native share is not usable. |
ShareDataThe share(data) helper accepts a subset of the Web Share API payload:
interface ShareData {
title?: string
text?: string
url?: string
files?: File[]
}Files are only honored when the browser supports Level 2 of the Web Share API.
interface UseNativeShareOptions {
onFallback?: (data: ShareData) => void | Promise<void>
}onFallback: Run when native share is not supported or when it rejects with a non-user-cancel error. Common choices:
error.canShare reflects whether navigator.share exists, but the hook also checks navigator.canShare when available to guard against unsupported payloads.useNativeShare with a clipboard fallback so desktop browsers still have a “copy share payload” affordance.Try this from a mobile browser with Web Share support to see the native sheet. On unsupported platforms, the payload falls back to the clipboard.