Installation

pnpm dlx uselab@latest add use-native-share

Usage

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>
  )
}

API Reference

useNativeShare(options?)

Parameters

Return value

The hook returns an object { canShare, isSharing, error, share }:

ShareData

The 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.

Options

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:
  • Copy a composed payload to the clipboard.
  • Open a mailto: link or custom share dialog.
  • Log/share to in-app activity feeds instead of the OS sheet.

Notes

• The hook only treats genuine errors as failures; user cancellations (e.g., dismissing the sheet) do not set error.
• canShare reflects whether navigator.share exists, but the hook also checks navigator.canShare when available to guard against unsupported payloads.
• For admin tools and CMS dashboards, combine useNativeShare with a clipboard fallback so desktop browsers still have a “copy share payload” affordance.