Add getWhatsAppUrl function (#6)

* Add getWhatsAppUrl function

* Run prettier on WhatsApp changes

* Apply prettier fixes to WhatApp code

Ran the correct npm command this time 😅

* Update README.md

Co-authored-by: Paulo <[email protected]>

Co-authored-by: Paulo <[email protected]>

Author: jriall

README.md

@@ -161,6 +161,29 @@ const ShareToTwitter = () => (
 export default ShareToTwitter;
 ```
 
+### getWhatsAppUrl()
+
+| Parameter | Type   | Required | Notes                                                |
+| --------- | ------ | -------- | ---------------------------------------------------- |
+| url       | string | **Yes**  | URL of shared webpage.                               |
+| text      | string | **No**   | Text to show in the WhatsApp message before the URL. |
+
+Basic component example usage:
+
+```jsx
+import { getWhatsAppUrl } from "@phntms/react-share";
+
+const ShareToWhatsApp = () => (
+  <a href={getWhatsAppUrl({ url: "https://phantom.land/" })}>
+    Share to WhatsApp
+  </a>
+);
+
+export default ShareToWhatsApp;
+```
+
+**Note**: WhatsApp links will only work on mobile, so be sure to hide any WhatsApp links if the user is not on a mobile device!
+
 ### getShareUrl()
 
 If you would rather have all share urls in one place, `getShareUrl()` can be used! It includes props from every social platform listed above, so simply pass in a `SocialPlatform`, and the platforms corresponding props.
@@ -186,6 +209,11 @@ const Share = () => (
   >
     Share to Twitter
   </a>
+  <a
+    href={getShareUrl(SocialPlatforms.WhatsApp, { url: "https://phantom.land/" })}
+  >
+    Share to WhatsApp
+  </a>
 );
 
 export default Share;

src/index.ts

@@ -16,6 +16,11 @@ export {
   FacebookProps,
 } from "./utils/getFacebookUrl";
 
+export {
+  default as getWhatsAppUrl,
+  WhatsAppProps,
+} from "./utils/getWhatsAppUrl";
+
 export {
   default as getShareUrl,
   AllSocialPlatformProps,

src/types.tsx

@@ -7,4 +7,5 @@ export enum SocialPlatforms {
   Facebook,
   Linkedin,
   Twitter,
+  WhatsApp,
 }

src/utils/getShareUrl.ts

@@ -2,10 +2,12 @@ import { SocialPlatforms } from "../types";
 import getFacebookUrl, { FacebookProps } from "./getFacebookUrl";
 import getLinkedinUrl, { LinkedinProps } from "./getLinkedinUrl";
 import getTwitterUrl, { TwitterProps } from "./getTwitterUrl";
+import getWhatsAppUrl, { WhatsAppProps } from "./getWhatsAppUrl";
 
 export type AllSocialPlatformProps = FacebookProps &
   LinkedinProps &
-  TwitterProps;
+  TwitterProps &
+  WhatsAppProps;
 
 export const getShareUrl = (
   socialPlatform: SocialPlatforms,
@@ -30,6 +32,9 @@ export const getShareUrl = (
 
     case SocialPlatforms.Twitter:
       return getTwitterUrl({ url, text, hashtags, related });
+
+    case SocialPlatforms.WhatsApp:
+      return getWhatsAppUrl({ url, text });
   }
 };
 

src/utils/getWhatsAppUrl.ts

@@ -0,0 +1,14 @@
+import { BaseShareProps } from "../types";
+import objectToUrlParams from "./objectToUrlParams";
+
+export interface WhatsAppProps extends BaseShareProps {
+  /** Text to prefill into the WhatsApp message. Appears prior to the URL. */
+  text?: string;
+}
+
+export const getWhatsAppUrl = ({ url, text }: WhatsAppProps) =>
+  `whatsapp://send?text=${objectToUrlParams({
+    text: text ? `${text} ${url}` : url,
+  })}`;
+
+export default getWhatsAppUrl;