/reactuse

useShare

Triggers the native share dialog.

Usage

import { useShare } from "@siberiacancode/reactuse";

const share = useShare();

Example

import { useShare } from "@siberiacancode/reactuse";

const share = useShare();
return (
  <button
    onClick={() =>
      share.trigger({
        title: "Design notes",
        text: "Check this out",
        url: "https://example.com",
      })
    }
    disabled={!share.supported}
  >
    Share
  </button>
);

text:

const share = useShare({ text: "Hello" });

title:

const share = useShare({ title: "Article" });

url:

const share = useShare({ url: "https://example.com" });

files:

const share = useShare({ files: [file] });

Notes

• Hook uses the navigator.share API.

Type Declarations

export interface UseShareParams {
  files?: File[];
  text?: string;
  title?: string;
  url?: string;
}
export interface UseShareReturn {
  supported: boolean;
  trigger: (shareParams: ShareData) => Promise<void>;
}
export declare const useShare: (params?: UseShareParams) => UseShareReturn;