Solution

You expose the native share sheet without letting a browser-only API make rendering unsafe.

The problem, in plain English

A Share button has two jobs: decide whether the browser offers sharing, then pass the requested data to the native operation. Some browsers expose navigator.share without navigator.canShare, so validation is optional even though sharing itself is available. The hook must also preserve browser rejections because cancellation is useful information to the caller.

The mental model

Treat the hook as a thin gate in front of the browser. Rendering records whether the entrance exists; calling a method reads the browser again, validates when possible, and then hands the original object to the native share sheet.

A first attempt

function useWebShare() {
  const isSupported = typeof navigator.share === 'function';

  return {
    isSupported,
    canShare: (data) => navigator.canShare(data),
    share: (data) => navigator.share(data),
  };
}

This reads navigator during rendering, which fails in a non-browser environment. It also assumes canShare exists whenever share does. The two inline functions change identity on every render, and the methods capture whatever the browser exposed during that render instead of reading it when the user clicks.

The working solution

const { useCallback, useEffect, useState } = require('react');

function getNavigator() {
  return typeof navigator === 'undefined' ? null : navigator;
}

function useWebShare() {
  const [isSupported, setIsSupported] = useState(false);

  useEffect(() => {
    const nav = getNavigator();
    setIsSupported(typeof nav?.share === 'function');
  }, []);

  const canShare = useCallback((data) => {
    const nav = getNavigator();
    if (typeof nav?.share !== 'function') return false;

    // A missing validator does not make the native share method unusable.
    if (typeof nav.canShare !== 'function') return true;
    return Boolean(nav.canShare(data));
  }, []);

  const share = useCallback(async (data) => {
    const nav = getNavigator();
    if (typeof nav?.share !== 'function') {
      throw new Error('Web Share API is not supported');
    }

    if (typeof nav.canShare === 'function' && !nav.canShare(data)) {
      throw new Error('The provided data cannot be shared');
    }

    // Awaiting preserves the browser's resolve timing and rejection object.
    await nav.share(data);
  }, []);

  return { isSupported, canShare, share };
}

module.exports = { useWebShare };

getNavigator makes every access environment-safe. The effect reconciles support after mount, while useCallback keeps both public methods stable. Each callback reads the current methods at call time, so a late polyfill or changed browser capability is respected without rebuilding the callbacks.

Walking through one call

A user clicks Share with { title: 'UIReady', url: 'https://uiready.dev' }. The stable share callback reads the current navigator.share. If navigator.canShare exists, the hook passes that exact object to it; false stops the operation with a clear error. A true result reaches navigator.share, and the hook waits until its promise resolves. If the user cancels and the browser rejects with AbortError, the same error reaches the caller.

Gotchas

• Calling from an effect — navigator.share requires transient activation, so invoke share directly inside the click handler that received the user's action.
• Treating cancellation as success — browsers may reject with AbortError when the user closes the sheet, so let that native rejection reach the caller.
• Assuming canShare exists — support for share is the required gate; fall back to the native call when prevalidation is unavailable.
• Replacing browser errors — a Permissions Policy or invalid native state can produce useful DOMException details, so only create errors for the hook's own preflight failures.

Going further

• Add an application-level clipboard fallback when isSupported is false, while keeping that fallback outside this browser-API hook.
• Layer status state around share in a consuming component when the interface needs pending, success, or cancellation feedback.
• Validate file-only data with canShare({ files }) before combining it with text fields, following the platform's file-sharing guidance.