useShare

npm install rooks

import { useShare } from "rooks";

function ShareButton() {
  const { share, isSupported, error, isSharing } = useShare();

  const handleShare = async () => {
    try {
      await share({
        title: "Check this out!",
        text: "This is an amazing article about React hooks",
        url: "https://example.com/article",
      });
      console.log("Content shared successfully!");
    } catch (err) {
      console.error("Share failed:", err);
    }
  };

  if (!isSupported) {
    return (
      <div>
        <p>Sharing not supported on this device</p>
        {/* Fallback UI - show social media buttons, copy link, etc. */}
      </div>
    );
  }

  return (
    <div>
      <button onClick={handleShare} disabled={isSharing}>
        {isSharing ? "Sharing..." : "Share"}
      </button>
      {error && <p style={{ color: "red" }}>Error: {error.message}</p>}
    </div>
  );
}

function ShareImage() {
  const { share } = useShare();

  const handleShareImage = async (file: File) => {
    await share({
      files: [file],
      title: "Check out this image!",
      text: "I wanted to share this with you",
    });
  };

  return <button onClick={() => handleShareImage(imageFile)}>Share Image</button>;
}

function ShareCurrentPage() {
  const { share } = useShare();

  const handleShare = async () => {
    await share({
      title: document.title,
      url: window.location.href,
    });
  };

  return <button onClick={handleShare}>Share This Page</button>;
}