From f25d7e92329472b0831a4f6842317c9fbaef2585 Mon Sep 17 00:00:00 2001 From: Samson Nwokike Date: Tue, 5 Mar 2024 02:23:43 +0100 Subject: [PATCH 1/2] Added share support for twitter mobile --- README.md | 721 +++++++++---------- src/components/buttons/TwitterShareButton.ts | 15 +- 2 files changed, 335 insertions(+), 401 deletions(-) diff --git a/README.md b/README.md index cf6ba12..903f921 100644 --- a/README.md +++ b/README.md @@ -10,38 +10,38 @@ Social media share buttons for your next React apps. ## 🎁 Features -* No dependencies -* Compatible with both JavaScript and TypeScript -* Share buttons for your next React app - * Facebook - * Line - * Pinterest - * Reddit - * Telegram - * Tumblr - * Twitter - * Viber - * Weibo - * Whatsapp - * Linkedin - * VKShare - * Mailru - * Livejournal - * Workplace - * Pocket - * Instapaper - * Hatena - * FacebookMessenger - * Email - * Gab -* Share counts - * FacebookShareCount - * HatenaShareCount - * OKShareCount - * PinterestShareCount - * TumblrShareCount - * VKShareCount -* Icons +- No dependencies +- Compatible with both JavaScript and TypeScript +- Share buttons for your next React app + - Facebook + - Line + - Pinterest + - Reddit + - Telegram + - Tumblr + - Twitter + - Viber + - Weibo + - Whatsapp + - Linkedin + - VKShare + - Mailru + - Livejournal + - Workplace + - Pocket + - Instapaper + - Hatena + - FacebookMessenger + - Email + - Gab +- Share counts + - FacebookShareCount + - HatenaShareCount + - OKShareCount + - PinterestShareCount + - TumblrShareCount + - VKShareCount +- Icons ## 🔧 Install @@ -64,10 +64,7 @@ yarn add next-share --save #### 👨‍💻 Code ```js -import { - FacebookShareButton, - FacebookIcon, -} from 'next-share' +import { FacebookShareButton, FacebookIcon } from 'next-share'; - +; ``` #### 📖 FacebookShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| quote | string | | A quote to be shared. | ❌ | -| hashtag | string | | Hashtag to be shared. | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| quote | string | | A quote to be shared. | ❌ | +| hashtag | string | | Hashtag to be shared. | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [FacebookIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -97,29 +94,26 @@ import { #### 👨‍💻 Code ```js -import { - LineShareButton, - LineIcon, -} from 'next-share' +import { LineShareButton, LineIcon } from 'next-share'; - +; ``` #### 📖 LineShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| windowWidth | number | 500 | Opened window width. | ❌ | -| windowHeight | number | 500 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| windowWidth | number | 500 | Opened window width. | ❌ | +| windowHeight | number | 500 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [LineIcon props](https://github.com/Bunlong/next-share#-icons-props) @@ -128,30 +122,27 @@ import { #### 👨‍💻 Code ```js -import { - PinterestShareButton, - PinterestIcon, -} from 'next-share' +import { PinterestShareButton, PinterestIcon } from 'next-share'; - +; ``` #### 📖 PinterestShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| media | string | | The image URL that will be pinned. | ✅ | -| description | string | | The description of the shared media. | ❌ | -| windowWidth | number | 1000 | Opened window width. | ❌ | -| windowHeight | number | 730 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| media | string | | The image URL that will be pinned. | ✅ | +| description | string | | The description of the shared media. | ❌ | +| windowWidth | number | 1000 | Opened window width. | ❌ | +| windowHeight | number | 730 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [PinterestIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -160,29 +151,26 @@ import { #### 👨‍💻 Code ```js -import { - RedditShareButton, - RedditIcon, -} from 'next-share' +import { RedditShareButton, RedditIcon } from 'next-share'; - +; ``` #### 📖 RedditShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [RedditIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -191,29 +179,26 @@ import { #### 👨‍💻 Code ```js -import { - TelegramShareButton, - TelegramIcon, -} from 'next-share' +import { TelegramShareButton, TelegramIcon } from 'next-share'; - +; ``` #### 📖 TelegramShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [TelegramIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -222,32 +207,29 @@ import { #### 👨‍💻 Code ```js -import { - TumblrShareButton, - TumblrIcon, -} from 'next-share' +import { TumblrShareButton, TumblrIcon } from 'next-share'; - +; ``` #### 📖 TumblrShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| tags | Array<string> | | | ❌ | -| caption | string | | The description of the shared page. | ❌ | -| posttype | string | link | | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------------------------------- | :---------------- | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| tags | Array<string> | | | ❌ | +| caption | string | | The description of the shared page. | ❌ | +| posttype | string | link | | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [TumblrIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -256,32 +238,30 @@ import { #### 👨‍💻 Code ```js -import { - TwitterShareButton, - TwitterIcon, -} from 'next-share' +import { TwitterShareButton, TwitterIcon } from 'next-share'; - +; ``` #### 📖 TwitterShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| via | string | | | ❌ | -| hashtags | array | | | ❌ | -| related | array | | | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :------------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| via | string | | | ❌ | +| hashtags | array | | | ❌ | +| related | array | | | ❌ | +| isMobile | boolean | false | Supports twitter share for mobile if set to `true` | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [TwitterIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -290,30 +270,27 @@ import { #### 👨‍💻 Code ```js -import { - ViberShareButton, - ViberIcon, -} from 'next-share' +import { ViberShareButton, ViberIcon } from 'next-share'; - +; ``` #### 📖 ViberShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| separator | | | | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| separator | | | | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [ViberIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -322,31 +299,28 @@ import { #### 👨‍💻 Code ```js -import { - WeiboShareButton, - WeiboIcon, -} from 'next-share' +import { WeiboShareButton, WeiboIcon } from 'next-share'; - +; ``` #### 📖 WeiboShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| image | string | | The image URL that will be shared. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 550 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| image | string | | The image URL that will be shared. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 550 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [WeiboIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -355,10 +329,7 @@ import { #### 👨‍💻 Code ```js -import { - WhatsappShareButton, - WhatsappIcon, -} from 'next-share' +import { WhatsappShareButton, WhatsappIcon } from 'next-share'; - +; ``` #### 📖 WhatsappShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| separator | string | | | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| separator | string | | | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [WhatsappIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -388,37 +359,34 @@ import { #### 👨‍💻 Code ```js -import { - LinkedinShareButton, - LinkedinIcon, -} from 'next-share' +import { LinkedinShareButton, LinkedinIcon } from 'next-share'; - +; ``` #### 📖 LinkedinShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| windowWidth | number | 750 | Opened window width. | ❌ | -| windowHeight | number | 600 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | - +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :------------------------------------------------------------- | :---------------------------- | --- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| windowWidth | number | 750 | Opened window width. | ❌ | +| windowHeight | number | 600 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| | How do you use things like `title`, `summary`, etc.? Use `og` tags in the `` block of the HTML. ```html - - - + + + ``` #### 📖 [LinkedinIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -428,32 +396,26 @@ Use `og` tags in the `` block of the HTML. #### 👨‍💻 Code ```js -import { - VKShareButton, - VKIcon, -} from 'next-share' +import { VKShareButton, VKIcon } from 'next-share'; - + - +; ``` #### 📖 VKShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| image | string | | An absolute link to the image that will be shared. | ❌ | -| noParse | boolean | | If true is passed, VK will not retrieve URL information. | ❌ | -| noVkLinks | boolean | | If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------------------------------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| image | string | | An absolute link to the image that will be shared. | ❌ | +| noParse | boolean | | If true is passed, VK will not retrieve URL information. | ❌ | +| noVkLinks | boolean | | If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [VKIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -462,31 +424,25 @@ import { #### 👨‍💻 Code ```js -import { - MailruShareButton, - MailruIcon, -} from 'next-share' +import { MailruShareButton, MailruIcon } from 'next-share'; - + - +; ``` #### 📖 MailruShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| description | string | | Description of the shared page. | ❌ | -| imageUrl | string | | Image url of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| description | string | | Description of the shared page. | ❌ | +| imageUrl | string | | Image url of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [MailruIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -495,10 +451,7 @@ import { #### 👨‍💻 Code ```js -import { - LivejournalShareButton, - LivejournalIcon, -} from 'next-share' +import { LivejournalShareButton, LivejournalIcon } from 'next-share'; - +; ``` #### 📖 LivejournalShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| description | string | | Description of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| description | string | | Description of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [LivejournalIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -528,30 +481,27 @@ import { #### 👨‍💻 Code ```js -import { - WorkplaceShareButton, - WorkplaceIcon, -} from 'next-share' +import { WorkplaceShareButton, WorkplaceIcon } from 'next-share'; - +; ``` #### 📖 WorkplaceShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| quote | string | | | ❌ | -| hashtag | string | | | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| quote | string | | | ❌ | +| hashtag | string | | | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [WorkplaceIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -560,29 +510,23 @@ import { #### 👨‍💻 Code ```js -import { - PocketShareButton, - PocketIcon, -} from 'next-share' +import { PocketShareButton, PocketIcon } from 'next-share'; - + - +; ``` #### 📖 PocketShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead. | ❌ | -| windowWidth | number | 500 | Opened window width. | ❌ | -| windowHeight | number | 500 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead. | ❌ | +| windowWidth | number | 500 | Opened window width. | ❌ | +| windowHeight | number | 500 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [PocketIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -591,30 +535,27 @@ import { #### 👨‍💻 Code ```js -import { - InstapaperShareButton, - InstapaperIcon, -} from 'next-share' +import { InstapaperShareButton, InstapaperIcon } from 'next-share'; - +; ``` #### 📖 InstapaperShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. | ❌ | -| description | string | | Description of the shared page. | ❌ | -| windowWidth | number | 500 | Opened window width. | ❌ | -| windowHeight | number | 500 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. | ❌ | +| description | string | | Description of the shared page. | ❌ | +| windowWidth | number | 500 | Opened window width. | ❌ | +| windowHeight | number | 500 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [InstapaperIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -623,29 +564,23 @@ import { #### 👨‍💻 Code ```js -import { - HatenaShareButton, - HatenaIcon, -} from 'next-share' +import { HatenaShareButton, HatenaIcon } from 'next-share'; - + - +; ``` #### 📖 HatenaShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [HatenaIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -657,28 +592,25 @@ import { import { FacebookMessengerShareButton, FacebookMessengerIcon, -} from 'next-share' +} from 'next-share'; - + - +; ``` #### 📖 FacebookMessengerShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| appId | string | | Facebook application id. | ✅ | -| redirectUri | string | | The URL to redirect to after sharing (default: the shared url). | ❌ | -| to | string | | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | ❌ | -| windowWidth | number | 1000 | Opened window width. | ❌ | -| windowHeight | number | 820 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :------ | :------ | :---------------------------------------------------------------------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| appId | string | | Facebook application id. | ✅ | +| redirectUri | string | | The URL to redirect to after sharing (default: the shared url). | ❌ | +| to | string | | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | ❌ | +| windowWidth | number | 1000 | Opened window width. | ❌ | +| windowHeight | number | 820 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [FacebookMessengerIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -687,10 +619,7 @@ import { #### 👨‍💻 Code ```js -import { - EmailShareButton, - EmailIcon, -} from 'next-share' +import { EmailShareButton, EmailIcon } from 'next-share'; - +; ``` #### 📖 EmailShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| subject | string | | | ❌ | -| body | string | | | ❌ | -| separator | string | | | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :---------- | :------ | :------ | :----------------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| subject | string | | | ❌ | +| body | string | | | ❌ | +| separator | string | | | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [EmailIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -719,41 +648,35 @@ import { #### 👨‍💻 Code ```js -import { - GabShareButton, - GabIcon, -} from 'next-share' +import { GabShareButton, GabIcon } from 'next-share'; - + - +; ``` #### 📖 GabShareButton Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 640 | Opened window height. | ❌ | +| Props | Type | Default | Description | Required | +| :----------- | :----- | :------ | :--------------------------------------- | :------- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 640 | Opened window height. | ❌ | #### 📖 [GabIcon Props](https://github.com/Bunlong/next-share#-icons-props) ## 📚 Icons Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| size | number | | Icon size in pixels. | ❌ | -| round | boolean | | Show round or rectangle. | ❌ | -| borderRadius | number | | Set rounded corners if using round icon. | ❌ | -| bgStyle | object | | Customize background style. | ❌ | -| iconFillColor | string | white | Customize icon fill color. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :------------ | :------ | :----------------- | :----------------------------------------------- | :------- | +| size | number | | Icon size in pixels. | ❌ | +| round | boolean | | Show round or rectangle. | ❌ | +| borderRadius | number | | Set rounded corners if using round icon. | ❌ | +| bgStyle | object | | Customize background style. | ❌ | +| iconFillColor | string | white | Customize icon fill color. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | ## 💡 Usage of ShareCount @@ -781,12 +704,12 @@ import { FacebookShareCount } from 'next-share' #### 📖 FacebookShareCount Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| url | string | | The URL of the shared page. | ✅ | -| appId | string | | Facebook application id. | ✅ | -| appSecret | string | | Facebook application secret. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :-------- | :----- | :------ | :--------------------------------------- | :------- | +| url | string | | The URL of the shared page. | ✅ | +| appId | string | | Facebook application id. | ✅ | +| appSecret | string | | Facebook application secret. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 Hatena @@ -804,10 +727,10 @@ import { HatenaShareCount } from 'next-share' #### 📖 HatenaShareCount Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :------- | :----- | :------ | :--------------------------------------- | :------- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 OK @@ -825,10 +748,10 @@ import { OKShareCount } from 'next-share' #### 📖 OKShareCount Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :------- | :----- | :------ | :--------------------------------------- | :------- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 Pinterest @@ -846,10 +769,10 @@ import { PinterestShareCount } from 'next-share' #### 📖 PinterestShareCount Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :------- | :----- | :------ | :--------------------------------------- | :------- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 Tumblr @@ -867,10 +790,10 @@ import { TumblrShareCount } from 'next-share' #### 📖 TumblrShareCount Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :------- | :----- | :------ | :--------------------------------------- | :------- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 VK @@ -888,10 +811,10 @@ import { VKShareCount } from 'next-share' #### 📖 VKShareCount Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :------- | :----- | :------ | :--------------------------------------- | :------- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ## 💡 Usage of Icon @@ -923,24 +846,24 @@ import { WeiboIcon, WhatsappIcon, WorkplaceIcon, -} from 'next-share' +} from 'next-share'; ``` #### 📖 Props -| Props | Type | Default | Description | Required | -| :--- | :--- | :--- | :--- | :--- | -| size | number | | Icon size in pixels. | ❌ | -| round | boolean | | Whether to show round or rect icons. | ❌ | -| borderRadius | number | | Allow rounded corners if using rect icons. | ❌ | -| bgStyle | object | | Customize background. | ❌ | -| iconFillColor | string | white | Customize icon fill color. | ❌ | +| Props | Type | Default | Description | Required | +| :------------ | :------ | :----------------- | :----------------------------------------- | :------- | +| size | number | | Icon size in pixels. | ❌ | +| round | boolean | | Whether to show round or rect icons. | ❌ | +| borderRadius | number | | Allow rounded corners if using rect icons. | ❌ | +| bgStyle | object | | Customize background. | ❌ | +| iconFillColor | string | white | Customize icon fill color. | ❌ | ## 📜 Changelog Latest version 0.27.0 (2023-09-28): - * Upgrade TwitterIcon +- Upgrade TwitterIcon Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-share/blob/master/CHANGELOG.md). @@ -1037,10 +960,10 @@ How to contribute: You maybe interested. -* [React Patterns](https://github.com/reactpatterns/reactpatterns) – React patterns & techniques to use in development for React Developer. -* [React Papaparse](https://github.com/Bunlong/react-papaparse) – The fastest in-browser CSV (or delimited text) parser for React. -* [Next QRCode](https://github.com/bunlong/next-qrcode) – React hooks for generating QR code for your next React apps. -* [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps. +- [React Patterns](https://github.com/reactpatterns/reactpatterns) – React patterns & techniques to use in development for React Developer. +- [React Papaparse](https://github.com/Bunlong/react-papaparse) – The fastest in-browser CSV (or delimited text) parser for React. +- [Next QRCode](https://github.com/bunlong/next-qrcode) – React hooks for generating QR code for your next React apps. +- [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps. ## ⚖️ License diff --git a/src/components/buttons/TwitterShareButton.ts b/src/components/buttons/TwitterShareButton.ts index 1c51a42..fc333cb 100644 --- a/src/components/buttons/TwitterShareButton.ts +++ b/src/components/buttons/TwitterShareButton.ts @@ -8,10 +8,19 @@ function twitterLink( via, hashtags = [], related = [], - }: { title?: string; via?: string; hashtags?: string[]; related?: string[] }, + isMobile = false, + }: { + title?: string; + via?: string; + hashtags?: string[]; + related?: string[]; + isMobile?: boolean; + }, ) { return ( - 'https://twitter.com/intent/tweet' + + (isMobile + ? 'https://mobile.twitter.com/intent/tweet' + : 'https://twitter.com/intent/tweet') + transformObjectToParams({ url, text: title, @@ -27,6 +36,7 @@ const TwitterShareButton = createShareButton<{ via?: string; hashtags?: string[]; related?: string[]; + isMobile?: boolean; }>( 'twitter', twitterLink, @@ -35,6 +45,7 @@ const TwitterShareButton = createShareButton<{ title: props.title, via: props.via, related: props.related, + isMobile: props.isMobile, }), { windowWidth: 550, From c53bb24a0a1228066f773a62e185457747a2fcff Mon Sep 17 00:00:00 2001 From: Samson Nwokike Date: Tue, 5 Mar 2024 03:28:02 +0100 Subject: [PATCH 2/2] Added share support for twitter mobile --- README.md | 724 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 401 insertions(+), 323 deletions(-) diff --git a/README.md b/README.md index 903f921..e911e7a 100644 --- a/README.md +++ b/README.md @@ -10,38 +10,38 @@ Social media share buttons for your next React apps. ## 🎁 Features -- No dependencies -- Compatible with both JavaScript and TypeScript -- Share buttons for your next React app - - Facebook - - Line - - Pinterest - - Reddit - - Telegram - - Tumblr - - Twitter - - Viber - - Weibo - - Whatsapp - - Linkedin - - VKShare - - Mailru - - Livejournal - - Workplace - - Pocket - - Instapaper - - Hatena - - FacebookMessenger - - Email - - Gab -- Share counts - - FacebookShareCount - - HatenaShareCount - - OKShareCount - - PinterestShareCount - - TumblrShareCount - - VKShareCount -- Icons +* No dependencies +* Compatible with both JavaScript and TypeScript +* Share buttons for your next React app + * Facebook + * Line + * Pinterest + * Reddit + * Telegram + * Tumblr + * Twitter + * Viber + * Weibo + * Whatsapp + * Linkedin + * VKShare + * Mailru + * Livejournal + * Workplace + * Pocket + * Instapaper + * Hatena + * FacebookMessenger + * Email + * Gab +* Share counts + * FacebookShareCount + * HatenaShareCount + * OKShareCount + * PinterestShareCount + * TumblrShareCount + * VKShareCount +* Icons ## 🔧 Install @@ -64,7 +64,10 @@ yarn add next-share --save #### 👨‍💻 Code ```js -import { FacebookShareButton, FacebookIcon } from 'next-share'; +import { + FacebookShareButton, + FacebookIcon, +} from 'next-share' -; + ``` #### 📖 FacebookShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| quote | string | | A quote to be shared. | ❌ | -| hashtag | string | | Hashtag to be shared. | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| quote | string | | A quote to be shared. | ❌ | +| hashtag | string | | Hashtag to be shared. | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [FacebookIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -94,26 +97,29 @@ import { FacebookShareButton, FacebookIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { LineShareButton, LineIcon } from 'next-share'; +import { + LineShareButton, + LineIcon, +} from 'next-share' -; + ``` #### 📖 LineShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| windowWidth | number | 500 | Opened window width. | ❌ | -| windowHeight | number | 500 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| windowWidth | number | 500 | Opened window width. | ❌ | +| windowHeight | number | 500 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [LineIcon props](https://github.com/Bunlong/next-share#-icons-props) @@ -122,27 +128,30 @@ import { LineShareButton, LineIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { PinterestShareButton, PinterestIcon } from 'next-share'; +import { + PinterestShareButton, + PinterestIcon, +} from 'next-share' -; + ``` #### 📖 PinterestShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| media | string | | The image URL that will be pinned. | ✅ | -| description | string | | The description of the shared media. | ❌ | -| windowWidth | number | 1000 | Opened window width. | ❌ | -| windowHeight | number | 730 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| media | string | | The image URL that will be pinned. | ✅ | +| description | string | | The description of the shared media. | ❌ | +| windowWidth | number | 1000 | Opened window width. | ❌ | +| windowHeight | number | 730 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [PinterestIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -151,26 +160,29 @@ import { PinterestShareButton, PinterestIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { RedditShareButton, RedditIcon } from 'next-share'; +import { + RedditShareButton, + RedditIcon, +} from 'next-share' -; + ``` #### 📖 RedditShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [RedditIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -179,26 +191,29 @@ import { RedditShareButton, RedditIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { TelegramShareButton, TelegramIcon } from 'next-share'; +import { + TelegramShareButton, + TelegramIcon, +} from 'next-share' -; + ``` #### 📖 TelegramShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [TelegramIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -207,29 +222,32 @@ import { TelegramShareButton, TelegramIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { TumblrShareButton, TumblrIcon } from 'next-share'; +import { + TumblrShareButton, + TumblrIcon, +} from 'next-share' -; + ``` #### 📖 TumblrShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------------------------------- | :---------------- | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| tags | Array<string> | | | ❌ | -| caption | string | | The description of the shared page. | ❌ | -| posttype | string | link | | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| tags | Array<string> | | | ❌ | +| caption | string | | The description of the shared page. | ❌ | +| posttype | string | link | | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [TumblrIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -238,30 +256,33 @@ import { TumblrShareButton, TumblrIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { TwitterShareButton, TwitterIcon } from 'next-share'; +import { + TwitterShareButton, + TwitterIcon, +} from 'next-share' -; + ``` #### 📖 TwitterShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :------------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| via | string | | | ❌ | -| hashtags | array | | | ❌ | -| related | array | | | ❌ | -| isMobile | boolean | false | Supports twitter share for mobile if set to `true` | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| via | string | | | ❌ | +| hashtags | array | | | ❌ | +| related | array | | | ❌ | +| isMobile | boolean | false | Supports twitter share for mobile if set to `true` | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [TwitterIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -270,27 +291,30 @@ import { TwitterShareButton, TwitterIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { ViberShareButton, ViberIcon } from 'next-share'; +import { + ViberShareButton, + ViberIcon, +} from 'next-share' -; + ``` #### 📖 ViberShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| separator | | | | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| separator | | | | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [ViberIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -299,28 +323,31 @@ import { ViberShareButton, ViberIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { WeiboShareButton, WeiboIcon } from 'next-share'; +import { + WeiboShareButton, + WeiboIcon, +} from 'next-share' -; + ``` #### 📖 WeiboShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| image | string | | The image URL that will be shared. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 550 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| image | string | | The image URL that will be shared. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 550 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [WeiboIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -329,7 +356,10 @@ import { WeiboShareButton, WeiboIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { WhatsappShareButton, WhatsappIcon } from 'next-share'; +import { + WhatsappShareButton, + WhatsappIcon, +} from 'next-share' -; + ``` #### 📖 WhatsappShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| separator | string | | | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| separator | string | | | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [WhatsappIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -359,34 +389,37 @@ import { WhatsappShareButton, WhatsappIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { LinkedinShareButton, LinkedinIcon } from 'next-share'; +import { + LinkedinShareButton, + LinkedinIcon, +} from 'next-share' -; + ``` #### 📖 LinkedinShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :------------------------------------------------------------- | :---------------------------- | --- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| windowWidth | number | 750 | Opened window width. | ❌ | -| windowHeight | number | 600 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | -| | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| windowWidth | number | 750 | Opened window width. | ❌ | +| windowHeight | number | 600 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | + How do you use things like `title`, `summary`, etc.? Use `og` tags in the `` block of the HTML. ```html - - - + + + ``` #### 📖 [LinkedinIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -396,26 +429,32 @@ Use `og` tags in the `` block of the HTML. #### 👨‍💻 Code ```js -import { VKShareButton, VKIcon } from 'next-share'; +import { + VKShareButton, + VKIcon, +} from 'next-share' - + -; + ``` #### 📖 VKShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------------------------------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| image | string | | An absolute link to the image that will be shared. | ❌ | -| noParse | boolean | | If true is passed, VK will not retrieve URL information. | ❌ | -| noVkLinks | boolean | | If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| image | string | | An absolute link to the image that will be shared. | ❌ | +| noParse | boolean | | If true is passed, VK will not retrieve URL information. | ❌ | +| noVkLinks | boolean | | If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [VKIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -424,25 +463,31 @@ import { VKShareButton, VKIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { MailruShareButton, MailruIcon } from 'next-share'; +import { + MailruShareButton, + MailruIcon, +} from 'next-share' - + -; + ``` #### 📖 MailruShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| description | string | | Description of the shared page. | ❌ | -| imageUrl | string | | Image url of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| description | string | | Description of the shared page. | ❌ | +| imageUrl | string | | Image url of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [MailruIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -451,7 +496,10 @@ import { MailruShareButton, MailruIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { LivejournalShareButton, LivejournalIcon } from 'next-share'; +import { + LivejournalShareButton, + LivejournalIcon, +} from 'next-share' -; + ``` #### 📖 LivejournalShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | The title of the shared page. | ❌ | -| description | string | | Description of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | The title of the shared page. | ❌ | +| description | string | | Description of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [LivejournalIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -481,27 +529,30 @@ import { LivejournalShareButton, LivejournalIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { WorkplaceShareButton, WorkplaceIcon } from 'next-share'; +import { + WorkplaceShareButton, + WorkplaceIcon, +} from 'next-share' -; + ``` #### 📖 WorkplaceShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| quote | string | | | ❌ | -| hashtag | string | | | ❌ | -| windowWidth | number | 550 | Opened window width. | ❌ | -| windowHeight | number | 400 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| quote | string | | | ❌ | +| hashtag | string | | | ❌ | +| windowWidth | number | 550 | Opened window width. | ❌ | +| windowHeight | number | 400 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [WorkplaceIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -510,23 +561,29 @@ import { WorkplaceShareButton, WorkplaceIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { PocketShareButton, PocketIcon } from 'next-share'; +import { + PocketShareButton, + PocketIcon, +} from 'next-share' - + -; + ``` #### 📖 PocketShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead. | ❌ | -| windowWidth | number | 500 | Opened window width. | ❌ | -| windowHeight | number | 500 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead. | ❌ | +| windowWidth | number | 500 | Opened window width. | ❌ | +| windowHeight | number | 500 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [PocketIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -535,27 +592,30 @@ import { PocketShareButton, PocketIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { InstapaperShareButton, InstapaperIcon } from 'next-share'; +import { + InstapaperShareButton, + InstapaperIcon, +} from 'next-share' -; + ``` #### 📖 InstapaperShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. | ❌ | -| description | string | | Description of the shared page. | ❌ | -| windowWidth | number | 500 | Opened window width. | ❌ | -| windowHeight | number | 500 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. | ❌ | +| description | string | | Description of the shared page. | ❌ | +| windowWidth | number | 500 | Opened window width. | ❌ | +| windowHeight | number | 500 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [InstapaperIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -564,23 +624,29 @@ import { InstapaperShareButton, InstapaperIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { HatenaShareButton, HatenaIcon } from 'next-share'; +import { + HatenaShareButton, + HatenaIcon, +} from 'next-share' - + -; + ``` #### 📖 HatenaShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 460 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 460 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [HatenaIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -592,25 +658,28 @@ import { HatenaShareButton, HatenaIcon } from 'next-share'; import { FacebookMessengerShareButton, FacebookMessengerIcon, -} from 'next-share'; +} from 'next-share' - + -; + ``` #### 📖 FacebookMessengerShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :------ | :------ | :---------------------------------------------------------------------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| appId | string | | Facebook application id. | ✅ | -| redirectUri | string | | The URL to redirect to after sharing (default: the shared url). | ❌ | -| to | string | | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | ❌ | -| windowWidth | number | 1000 | Opened window width. | ❌ | -| windowHeight | number | 820 | Opened window height. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| appId | string | | Facebook application id. | ✅ | +| redirectUri | string | | The URL to redirect to after sharing (default: the shared url). | ❌ | +| to | string | | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | ❌ | +| windowWidth | number | 1000 | Opened window width. | ❌ | +| windowHeight | number | 820 | Opened window height. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [FacebookMessengerIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -619,7 +688,10 @@ import { #### 👨‍💻 Code ```js -import { EmailShareButton, EmailIcon } from 'next-share'; +import { + EmailShareButton, + EmailIcon, +} from 'next-share' -; + ``` #### 📖 EmailShareButton Props -| Props | Type | Default | Description | Required | -| :---------- | :------ | :------ | :----------------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| subject | string | | | ❌ | -| body | string | | | ❌ | -| separator | string | | | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| subject | string | | | ❌ | +| body | string | | | ❌ | +| separator | string | | | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | #### 📖 [EmailIcon Props](https://github.com/Bunlong/next-share#-icons-props) @@ -648,35 +720,41 @@ import { EmailShareButton, EmailIcon } from 'next-share'; #### 👨‍💻 Code ```js -import { GabShareButton, GabIcon } from 'next-share'; +import { + GabShareButton, + GabIcon, +} from 'next-share' - + -; + ``` #### 📖 GabShareButton Props -| Props | Type | Default | Description | Required | -| :----------- | :----- | :------ | :--------------------------------------- | :------- | -| children | node | | React component, HTML element or string. | ✅ | -| url | string | | The URL of the shared page. | ✅ | -| title | string | | Title of the shared page. | ❌ | -| windowWidth | number | 660 | Opened window width. | ❌ | -| windowHeight | number | 640 | Opened window height. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| children | node | | React component, HTML element or string. | ✅ | +| url | string | | The URL of the shared page. | ✅ | +| title | string | | Title of the shared page. | ❌ | +| windowWidth | number | 660 | Opened window width. | ❌ | +| windowHeight | number | 640 | Opened window height. | ❌ | #### 📖 [GabIcon Props](https://github.com/Bunlong/next-share#-icons-props) ## 📚 Icons Props -| Props | Type | Default | Description | Required | -| :------------ | :------ | :----------------- | :----------------------------------------------- | :------- | -| size | number | | Icon size in pixels. | ❌ | -| round | boolean | | Show round or rectangle. | ❌ | -| borderRadius | number | | Set rounded corners if using round icon. | ❌ | -| bgStyle | object | | Customize background style. | ❌ | -| iconFillColor | string | white | Customize icon fill color. | ❌ | -| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| size | number | | Icon size in pixels. | ❌ | +| round | boolean | | Show round or rectangle. | ❌ | +| borderRadius | number | | Set rounded corners if using round icon. | ❌ | +| bgStyle | object | | Customize background style. | ❌ | +| iconFillColor | string | white | Customize icon fill color. | ❌ | +| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ | ## 💡 Usage of ShareCount @@ -704,12 +782,12 @@ import { FacebookShareCount } from 'next-share' #### 📖 FacebookShareCount Props -| Props | Type | Default | Description | Required | -| :-------- | :----- | :------ | :--------------------------------------- | :------- | -| url | string | | The URL of the shared page. | ✅ | -| appId | string | | Facebook application id. | ✅ | -| appSecret | string | | Facebook application secret. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| url | string | | The URL of the shared page. | ✅ | +| appId | string | | Facebook application id. | ✅ | +| appSecret | string | | Facebook application secret. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 Hatena @@ -727,10 +805,10 @@ import { HatenaShareCount } from 'next-share' #### 📖 HatenaShareCount Props -| Props | Type | Default | Description | Required | -| :------- | :----- | :------ | :--------------------------------------- | :------- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 OK @@ -748,10 +826,10 @@ import { OKShareCount } from 'next-share' #### 📖 OKShareCount Props -| Props | Type | Default | Description | Required | -| :------- | :----- | :------ | :--------------------------------------- | :------- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 Pinterest @@ -769,10 +847,10 @@ import { PinterestShareCount } from 'next-share' #### 📖 PinterestShareCount Props -| Props | Type | Default | Description | Required | -| :------- | :----- | :------ | :--------------------------------------- | :------- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 Tumblr @@ -790,10 +868,10 @@ import { TumblrShareCount } from 'next-share' #### 📖 TumblrShareCount Props -| Props | Type | Default | Description | Required | -| :------- | :----- | :------ | :--------------------------------------- | :------- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ### 🎀 VK @@ -811,10 +889,10 @@ import { VKShareCount } from 'next-share' #### 📖 VKShareCount Props -| Props | Type | Default | Description | Required | -| :------- | :----- | :------ | :--------------------------------------- | :------- | -| url | string | | The URL of the shared page. | ✅ | -| children | node | | React component, HTML element or string. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| url | string | | The URL of the shared page. | ✅ | +| children | node | | React component, HTML element or string. | ❌ | ## 💡 Usage of Icon @@ -846,24 +924,24 @@ import { WeiboIcon, WhatsappIcon, WorkplaceIcon, -} from 'next-share'; +} from 'next-share' ``` #### 📖 Props -| Props | Type | Default | Description | Required | -| :------------ | :------ | :----------------- | :----------------------------------------- | :------- | -| size | number | | Icon size in pixels. | ❌ | -| round | boolean | | Whether to show round or rect icons. | ❌ | -| borderRadius | number | | Allow rounded corners if using rect icons. | ❌ | -| bgStyle | object | | Customize background. | ❌ | -| iconFillColor | string | white | Customize icon fill color. | ❌ | +| Props | Type | Default | Description | Required | +| :--- | :--- | :--- | :--- | :--- | +| size | number | | Icon size in pixels. | ❌ | +| round | boolean | | Whether to show round or rect icons. | ❌ | +| borderRadius | number | | Allow rounded corners if using rect icons. | ❌ | +| bgStyle | object | | Customize background. | ❌ | +| iconFillColor | string | white | Customize icon fill color. | ❌ | ## 📜 Changelog Latest version 0.27.0 (2023-09-28): -- Upgrade TwitterIcon + * Upgrade TwitterIcon Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-share/blob/master/CHANGELOG.md). @@ -960,10 +1038,10 @@ How to contribute: You maybe interested. -- [React Patterns](https://github.com/reactpatterns/reactpatterns) – React patterns & techniques to use in development for React Developer. -- [React Papaparse](https://github.com/Bunlong/react-papaparse) – The fastest in-browser CSV (or delimited text) parser for React. -- [Next QRCode](https://github.com/bunlong/next-qrcode) – React hooks for generating QR code for your next React apps. -- [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps. +* [React Patterns](https://github.com/reactpatterns/reactpatterns) – React patterns & techniques to use in development for React Developer. +* [React Papaparse](https://github.com/Bunlong/react-papaparse) – The fastest in-browser CSV (or delimited text) parser for React. +* [Next QRCode](https://github.com/bunlong/next-qrcode) – React hooks for generating QR code for your next React apps. +* [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps. ## ⚖️ License @@ -1012,4 +1090,4 @@ export default class Sticky extends Component { } } -====================== --> +====================== --> \ No newline at end of file