# useShare

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

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

## Usage

```ts
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>
)
```

## 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

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

**Returns** `{ supported, share }`.

## Browser support

Not available in Firefox.

- Where `navigator.share` is missing, `supported` is `false` and `share` resolves to `false`; offer `useCopyToClipboard` instead.

---

196 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useShare.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useShare/
Previous: [useCopyToClipboard](https://vincentri.github.io/react-tils/hooks/useCopyToClipboard.md)
Next: [useFullscreen](https://vincentri.github.io/react-tils/hooks/useFullscreen.md)