diff --git a/README.md b/README.md index b380503..cb7dcc9 100644 --- a/README.md +++ b/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 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 diff --git a/package-lock.json b/package-lock.json index 819059f..22bbb7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "dv-social-share", - "version": "0.0.5", + "version": "0.1.88", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dv-social-share", - "version": "0.0.5", + "version": "0.1.88", "license": "MIT", "devDependencies": { "@babel/core": "^7.23.0", @@ -41,7 +41,7 @@ "npm": ">=6" }, "peerDependencies": { - "react": ">=17.0.2" + "react": ">=16.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/package.json b/package.json index ee1bfed..cac99ea 100644 --- a/package.json +++ b/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 (https://github.com/dhavalveera)", "license": "MIT", diff --git a/rollup.config.mjs b/rollup.config.mjs index 7c7ad95..3571fd0 100644 --- a/rollup.config.mjs +++ b/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(), ], diff --git a/src/Buttons/ThreadsShare/index.ts b/src/Buttons/ThreadsShare/index.ts new file mode 100644 index 0000000..7179f1b --- /dev/null +++ b/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 diff --git a/src/Buttons/WhatsAppShare/index.ts b/src/Buttons/WhatsAppShare/index.ts index 82bd734..9285134 100644 --- a/src/Buttons/WhatsAppShare/index.ts +++ b/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) => { diff --git a/src/Icons/ThreadsShareIcon/index.ts b/src/Icons/ThreadsShareIcon/index.ts new file mode 100644 index 0000000..5193198 --- /dev/null +++ b/src/Icons/ThreadsShareIcon/index.ts @@ -0,0 +1,3 @@ +const ThreadsShareIcon: string = 'data:image/webp;base64,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' + +export default ThreadsShareIcon \ No newline at end of file diff --git a/src/Icons/index.ts b/src/Icons/index.ts index 46a82a4..f369c9a 100644 --- a/src/Icons/index.ts +++ b/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' diff --git a/src/ShareButton/index.ts b/src/ShareButton/index.ts index 6864d18..074d404 100644 --- a/src/ShareButton/index.ts +++ b/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 }, diff --git a/src/constants/ButtonNames/index.ts b/src/constants/ButtonNames/index.ts index c523629..0e93857 100644 --- a/src/constants/ButtonNames/index.ts +++ b/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' diff --git a/src/index.ts b/src/index.ts index f839278..08d92ef 100644 --- a/src/index.ts +++ b/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'