react-use-web-share

useWebShare

A custom react hook for triggering the native web share dialog in supported browsers

Demo

Usage

npm install react-use-web-share

const { loading, isSupported, share } = useWebShare();
 
function onClick() {
  share();
}

See example directory for full example.

Parameters

Parameter	description	default	required
onSuccess	called on successfully sharing the content	() => {}	false
onError	called when caught error from navigator share content	() => {}	false

Returns

Name	Type	Description
loading	boolean	Loading state
isSupported	boolean	Detects whether the feature is supported in user's browser. Can be used to show the fallback
share	function	can be called to trigger the native share popup

share

This is the function that triggers the native share dialog in browser.

This takes an object as argument.

Name	description	default
title	title of shared item	document.title
text	text of shared item
url	url to be shared	canonical url if present, otherwise current url

Contributing

1. Install dependencies

npm install

1. Run dev for lib

npm run dev

1. Run demo

npm start