All hooks / Browser APIs

useShare

196 B minified and brotliedSourceMarkdown! Not available in Firefox

Opens the device's native share sheet (Web Share API), and says whether it is available.

supported is false on the server and during hydration, so a share button appears after hydration with no mismatch. share resolves true when shared, and false when unsupported, when the data can't be shared (e.g. files on a browser that doesn't support them), or when the user cancels.

Import

import { useShare } from '@vincent.ri/react-tils'
// or only this hook
import { useShare } from '@vincent.ri/react-tils/useShare'

Usage

const { supported, share } = useShare()
const [copy, copied] = useCopyToClipboard()
return supported ? (
  <button onClick={() => share({ title: post.title, url: post.url })}>Share</button>
) : (
  <button onClick={() => copy(post.url)}>{copied ? 'Copied!' : 'Copy link'}</button>
)

Live demo

When to use it

A "Share" button on mobile, especially for links or files.

When not to

You need a fallback everywhere; desktop Firefox and many desktop setups don't support it, so pair it with useCopyToClipboard. Call share from a user action (click); browsers refuse otherwise.

API

function useShare(): {
  supported: boolean;
  share: (data: ShareData) => Promise<boolean>;
}

Returns { supported, share }.