[IMPL] useShare hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useShare/UseShare.tsx

@@ -0,0 +1,21 @@
+import { useRef } from "react"
+import { useShare } from "../../../../../../packages/react-tools/src"
+
+/**
+The component uses _useShare_ hook to know if Web share API is supported and returns a button to share link to this library.
+ */
+export const UseShare = () => {
+	const sharedDate = useRef<ShareData>({
+		title: "React-tools",
+		text: "React tools",
+		url: window.location.origin + "/index.html"
+	})
+	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>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -80,7 +80,8 @@ export const COMPONENTS = [
 			"useIdle",
 			"useFullscreen",
 			"useBattery",
-			"useGeolocation"
+			"useGeolocation",
+			"useShare"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/useGeolocation.md

@@ -6,26 +6,32 @@ Hook to use user's geographic location. Refer to [GeoLocation API](https://devel
 ```tsx
 export const UseGeolocation = () => {
 	const [error, setError] = useState("")
-	const [location] = useGeolocation({onError(error) {
-		setError(error.message);
-	}});
+	const [location, currentPosition] = useGeolocation({
+		mode: "manual",
+		onError(error) {
+			setError(error.message);
+		}
+	});
 
-	return (<div style={{ textAlign: "center" }}>
+	return (<div style={{ textAlign: "left", width: 'fit-content', margin:'0 auto' }}>
 		{
 			error && <p style={{ color: 'red' }}>{error}</p>
 		}
-		<p >isSupported: {location?.isSupported}</p>
+		<br/>
+		<button onClick={currentPosition}>Get Location</button>
+		<br />
+		<p >isSupported: {location.isSupported ? "true" : "false"}</p>
 		<p >Timestamp: {location?.position?.timestamp}</p>
 		<p >Coords:</p>
-		<ul>
-			{
-				Object.entries(location?.position?.coords ?? []).map(([key, value]) => {
-					return <li>
-						{key}: {value}
-					</li>
-				})
-			}
-		</ul>
+		<div style={{paddingLeft: 10, textAlign: 'left', width: 'fit-content', margin: '0 auto'}}>
+			<p>accuracy: {location.position?.coords.accuracy}</p>
+			<p>altitude: {location.position?.coords.altitude}</p>
+			<p>altitudeAccuracy: {location.position?.coords.altitudeAccuracy}</p>
+			<p>heading: {location.position?.coords.heading}</p>
+			<p>latitude: {location.position?.coords.latitude}</p>
+			<p>longitude: {location.position?.coords.longitude}</p>
+			<p>speed: {location.position?.coords.speed}</p>
+		</div>
 	</div>)
 }
 ```
@@ -45,8 +51,8 @@ useGeolocation * - _first element_: is the location object with two properties:
 options to use geolocation.
 > - __opts.locationOptions?__: _PositionOptions_  
 An optional object which provides options for retrieval of the position data.
-> - __opts.observe?__: _boolean_  
-if true returns current position and observes position change, otherwise returns only position in that time.
+> - __opts.mode?__: _boolean_  
+it establishes how to obtain the geographic location:
 > - __opts.onError?__: _GeolocationPositionError_  
 callback that will be executed if there will be errors.
 >
@@ -59,6 +65,6 @@ callback that will be executed if there will be errors.
     - _()=>void_  
 > Array with:
 > - _first element_: is the location object with two properties: __isSupported__ and __position__.
-> - _second element_: function to observe location changes and it receives one param __successCallback__ and two optional params __errorCallback__ and __options__.
-> - _third element_: function to cancel previous observing location changes.
+> - _second element_: function to obtain manually current location.
+> - _third element_: function to obtain location on every changes.
 >

apps/react-tools-demo/src/markdown/useShare.md

@@ -0,0 +1,44 @@
+# useShare
+Hook to use [Web Share Api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API).
+
+## Usage
+
+```tsx
+export const UseShare = () => {
+	const sharedDate = useRef<ShareData>({
+		title: "React-tools",
+		text: "React tools",
+		url: window.location.origin + "/index.html"
+	})
+	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>
+}
+```
+
+> The component uses _useShare_ hook to know if Web share API is supported and returns a button to share link to this library.
+
+
+## API
+
+```tsx
+useShare (): {isSupported: boolean, share: (data?: ShareData)=>Promise<void>} 
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> __object__: __isSupported__ to known if share API is supported and __share__ function to use Web share API.
+> - __Object__:  
+>     - __isSupported__ : _boolean_  
+>     - __share__ : _(data?: ShareData) => Promise<void>_  
+>

packages/react-tools/README.md

@@ -94,13 +94,12 @@
 	- [x] useFullscreen (check browser compatibility)
 	- [x] useBattery
 	- [x] useGeolocation
-	- [ ] useShare
+	- [x] useShare
 	- [ ] useScreenShare
 	- [ ] useFetch (with suspense ???)
 	- [ ] useAsync
 	- [ ] useAudio (???)
 	- [ ] useVideo (???)
-	- [ ] useOs
 	- [ ] useEyeDropper (refer to https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
 	- [ ] useMedia
 	- [ ] useMediaDevices

packages/react-tools/src/hooks/index.ts

@@ -61,4 +61,5 @@ export { useScrollIntoView } from './useScrollIntoView';
 export { useMouse } from './useMouse';
 export { useLongPress } from './useLongPress';
 export { useBattery } from './useBattery';
-export { useGeolocation } from './useGeolocation';
+export { useGeolocation } from './useGeolocation';
+export { useShare } from './useShare';

packages/react-tools/src/hooks/useShare.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react"
+
+/**
+ * **`useShare`**: Hook to use [Web Share Api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API).
+ * @returns {{isSupported: boolean, share: (data?: ShareData) => Promise<void>}} object - __isSupported__ to known if share API is supported and __share__ function to use Web share API.
+ */
+export const useShare = (): {isSupported: boolean, share: (data?: ShareData)=>Promise<void>} => {
+	const isSupported = "share" in navigator;
+
+	const share = useCallback((data?: ShareData) => {
+		if ("share" in navigator) {
+			return navigator.share(data);
+		} else {
+			return Promise.resolve(void 0);
+		}
+	}, []);
+
+	return {
+		isSupported,
+		share
+	}
+}

packages/react-tools/src/index.ts

@@ -77,7 +77,8 @@ export {
 	useMouse,
 	useLongPress,
 	useBattery,
-	useGeolocation
+	useGeolocation,
+	useShare
 } from './hooks'
 
 export {