Thread

README.md

@@ -29,6 +29,7 @@ Social media share buttons for your next React.js, Next.js apps.
   - Refind
   - Skype
   - Telegram
+  - Threads
   - Trello
   - Tumblr
   - Twitter
@@ -512,6 +513,28 @@ import { TrelloShareBtn } from 'dv-social-share'
 
 ---
 
+## ThreadsShare
+
+#### 👨‍💻 Code
+
+
+```js copy
+import { ThreadsShareBtn } from 'dv-social-share'
+
+<ThreadsShareBtn url="https://dv-social-share.vercel.app" title="dv-social-share is a social share buttons for your next React.js & Next.js apps." />
+```
+
+#### 📖 ThreadsShareBtn Props
+
+| Props        | Type    | Default | Description                                                                                                                   | Required |
+| :----------- | :------ | :------ | :---------------------------------------------------------------------------------------------------------------------------- | :------- |
+| url          | string  |         | The URL of the to be page.                                                                                                    | ✅       |
+| title         | string  |         | Description of the shared page.                                                                                               | ❌       |
+| openInNewTab | boolean | false   | Open share window in a new tab if set to `true`.                                                                              | ❌       |
+| imgConfig    | object  |         | A imgConfig contains width (number; e.g. 32/64), height (number; e.g. 32/64) & bgColor (string; e.g. '#FF0000') for the Image | ❌       |
+
+---
+
 ## TumblrShare
 
 #### 👨‍💻 Code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dv-social-share",
-  "version": "0.0.6-1",
+  "version": "0.0.7",
   "description": "Social media share buttons for your next apps like React, Next.js in TypeScript.",
   "author": "Dhaval Vira <dhavalveera@gmail.com> (https://github.com/dhavalveera)",
   "license": "MIT",

rollup.config.mjs

@@ -19,7 +19,7 @@ export default {
     },
   ],
   // external: builtins,
-  external: ['react'],
+  external: ['react', 'react-dom'],
   plugins: [
     resolve(),
     babel({
@@ -35,7 +35,7 @@ export default {
     // }),
     // nodeResolve(),
     commonjs({
-      extensions: ['.js', '.ts', '.tsx'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
     }),
     terser(),
   ],

src/Buttons/ThreadsShare/index.ts

@@ -0,0 +1,35 @@
+// UTILS
+import { generateQueryParams } from '../../utils'
+
+// Make Share Button => Contains Main Logic
+import MakeShareButton from '../../ShareButton'
+
+// Icon
+import { ThreadsShareIcon } from '../../Icons'
+
+// CONSTANTS
+import { defaultImgConfig, dontOpenShareDialogOnClick, THREADS_NAME } from '../../constants'
+
+type GenerateThreadsLinkType = { title?: string; separator?: string }
+
+type ThreadsShareBtnTypes = {
+  url: string
+  title?: string
+  separator?: string
+  openInNewTab?: boolean
+  imgConfig?: {
+    width?: number
+    height?: number
+    bgColor?: string
+  }
+}
+
+const generateThreadsLink = (url: string, { title, separator = ' :: ' }: GenerateThreadsLinkType) => {
+  return `https://www.threads.net/intent/post${generateQueryParams({ text: title ? title + separator + url : url })}`
+}
+
+const ThreadsShareBtn = ({ url, title, separator, openInNewTab, imgConfig }: ThreadsShareBtnTypes) => {
+  return MakeShareButton(THREADS_NAME, generateThreadsLink(url, { title, separator }), ThreadsShareIcon, openInNewTab || dontOpenShareDialogOnClick, imgConfig || defaultImgConfig)
+}
+
+export default ThreadsShareBtn

src/Buttons/WhatsAppShare/index.ts

@@ -1,5 +1,5 @@
 // Utils
-import { generateQueryParams, isMobileOrTablet } from '../../utils'
+import { generateQueryParams } from '../../utils'
 
 // Make Share Button => Contains Main logic
 import MakeShareButton from '../../ShareButton'
@@ -25,7 +25,7 @@ type WhatsAppShareBtnTypes = {
 }
 
 const generateWhatsAppLink = (url: string, { title, separator = ' :: ' }: GenerateWhatsAppLinkTypes) => {
-  return `https://${isMobileOrTablet() ? 'api' : 'web'}.whatsapp.com/send${generateQueryParams({ text: title ? title + separator + url : url })}`
+  return `https://api.whatsapp.com/send${generateQueryParams({ text: title ? title + separator + url : url })}`
 }
 
 const WhatsAppShareBtn = ({ url, title, separator, openInNewTab, imgConfig }: WhatsAppShareBtnTypes) => {

src/Icons/ThreadsShareIcon/index.ts

@@ -0,0 +1,3 @@
+const ThreadsShareIcon: string = 'data:image/webp;base64,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'
+
+export default ThreadsShareIcon

src/Icons/index.ts

@@ -17,6 +17,7 @@ export { default as RedditShareIcon } from './RedditShareIcon'
 export { default as RefindShareIcon } from './RefindShareIcon'
 export { default as SkypeShareIcon } from './SkypeShare'
 export { default as TelegramShareIcon } from './TelegramShareIcon'
+export { default as ThreadsShareIcon } from './ThreadsShareIcon'
 export { default as TrelloShareIcon } from './TrelloShareIcon'
 export { default as TumblrShareIcon } from './TumblrShareIcon'
 export { default as TwitterShareIcon } from './TwitterShareIcon'

src/ShareButton/index.ts

@@ -21,8 +21,6 @@ const MakeShareButton = (name: string, url: string, Icon: string, openShareDialo
     CustomWindow(url, windowConfig, openShareDialogOnClick)
   }
 
-  console.log({ name, url, Icon, imgConfig })
-
   return createElement(
     'button',
     { type: 'button', 'aria-label': `${name}-Share`, title: name, onClick: handleOnClick, className: ShareBtnCss },

src/constants/ButtonNames/index.ts

@@ -17,6 +17,7 @@ export const REDDIT_NAME: string = 'Reddit'
 export const REFIND_NAME: string = 'Refind'
 export const SKYPE_NAME: string = 'Skype'
 export const TELEGRAM_NAME: string = 'Telegram'
+export const THREADS_NAME:string = 'Threads'
 export const TRELLO_NAME: string = 'Trello'
 export const TUMBLR_NAME: string = 'Tumblr'
 export const TWITTER_NAME: string = 'Twitter'

src/index.ts

@@ -17,6 +17,7 @@ export { default as RedditShareBtn } from './Buttons/RedditShare'
 export { default as RefindShareBtn } from './Buttons/RefindShare'
 export { default as SkypeShareBtn } from './Buttons/SkypeShare'
 export { default as TelegramShareBtn } from './Buttons/TelegramShare'
+export { default as ThreadsShareBtn } from './Buttons/ThreadsShare'
 export { default as TrelloShareBtn } from './Buttons/TrelloShare'
 export { default as TumblrShareBtn } from './Buttons/TumblrShare'
 export { default as TwitterShareBtn } from './Buttons/TwitterShare'