useShare

See: (https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API).

Demo

INFO

The component uses useShare hook to know if Web share API is supported and returns a button to share link to this library.

Loading demo…

Show source code

import { useRef } from "react"
import { useShare } from "../../../.."

export const UseShare = () => {
	const sharedDate = useRef<ShareData>({
		title: "React-tools",
		text: "React tools",
		url: window.location.origin
	})
	const { isSupported, share } = useShare();

	const onClick = () => share(sharedDate.current);

	return <div style={{textAlign: "center"}}>
		<p>Is supported: {isSupported.toString()}</p>
		<button onClick={onClick}>Share</button>
	</div>
}

Types

UseShareResult

Result object returned by useShare.

Property	Type	Required	Description
share	(data: ShareData) => Promise<void>	✓	Invoke the native share sheet with the provided data.
isSupported	boolean	✓	true when the Web Share API (navigator.share) is available in the current browser.