useNavigatorShare

A hook that provides access to the Web Share API for sharing content on mobile and desktop devices. Perfect for implementing native share functionality in web applications.

Parameters

This hook doesn’t take any parameters.

Returns

• shareInNavigator: (data: ShareData) => Promise<void> - Function to trigger the native share dialog

ShareData Interface

interface ShareData {
  title: string;      // Title of the content to share
  text: string;       // Text description to share
  url?: string;       // URL to share
  files?: File[];     // Files to share (if supported)
}

Usage

import { useNavigatorShare } from '@rhinolabs/react-hooks';

function ShareButton() {
  const { shareInNavigator } = useNavigatorShare();

  const handleShare = async () => {
    await shareInNavigator({
      title: 'Check this out!',
      text: 'This is an awesome article about React hooks',
      url: window.location.href
    });
  };

  return (
    <button onClick={handleShare}>
      Share this page
    </button>
  );
}

Notes

• Uses Web Share API
• Handles browser support checks
• Provides error handling
• Supports file sharing
• Permission checking
• Type-safe interface
• Friendly error messages for:
  • Permission denied
  • Aborted sharing
  • Browser not supported
  • Invalid data types