{"id":14957341,"url":"https://github.com/bunlong/next-share","last_synced_at":"2025-05-16T13:07:14.516Z","repository":{"id":38825772,"uuid":"282947984","full_name":"Bunlong/next-share","owner":"Bunlong","description":"Social media share buttons and share counts for your next React apps.","archived":false,"fork":false,"pushed_at":"2024-06-27T18:29:36.000Z","size":513,"stargazers_count":256,"open_issues_count":41,"forks_count":39,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-14T19:48:51.272Z","etag":null,"topics":["create-react-app","javascript","next","next-share","nextjs","nextjs-plugin","react","react-share","reactjs","sharing","social-media","social-share","social-share-buttons","typescript"],"latest_commit_sha":null,"homepage":"https://next-share.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bunlong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"supports/create-next-app/.eslintrc.json","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-27T16:04:19.000Z","updated_at":"2025-05-07T09:45:15.000Z","dependencies_parsed_at":"2023-09-28T10:08:10.098Z","dependency_job_id":"f7556b52-963a-411a-a78c-e214b61683a9","html_url":"https://github.com/Bunlong/next-share","commit_stats":{"total_commits":228,"total_committers":8,"mean_commits":28.5,"dds":0.03947368421052633,"last_synced_commit":"a040fd86552e993cf80ef5a6317b3928e8bfaaf2"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Fnext-share","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Fnext-share/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Fnext-share/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bunlong%2Fnext-share/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bunlong","download_url":"https://codeload.github.com/Bunlong/next-share/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535829,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","javascript","next","next-share","nextjs","nextjs-plugin","react","react-share","reactjs","sharing","social-media","social-share","social-share-buttons","typescript"],"created_at":"2024-09-24T13:14:45.012Z","updated_at":"2025-05-16T13:07:14.478Z","avatar_url":"https://github.com/Bunlong.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-share\n\nSocial media share buttons for your next React apps.\n\n[![downloads](https://img.shields.io/npm/dm/next-share.svg?label=monthly%20downloads)](https://www.npmjs.com/package/next-share) [![downloads](https://img.shields.io/npm/dt/next-share.svg?label=total%20downloads)](https://www.npmjs.com/package/next-share)\n\n[![NPM](https://img.shields.io/npm/v/next-share.svg)](https://www.npmjs.com/package/next-share) ![npm bundle size](https://img.shields.io/bundlephobia/min/next-share) [![Build Status](https://api.travis-ci.com/Bunlong/next-share.svg?branch=master)](https://travis-ci.com/Bunlong/next-share) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003cimg src=\"https://raw.githubusercontent.com/bunlong/next-share/master/static/images/next-share.png\" alt=\"next-share\" /\u003e\n\n## 🎁 Features\n\n* No dependencies\n* Compatible with both JavaScript and TypeScript\n* Share buttons for your next React app\n  * Facebook\n  * Line\n  * Pinterest\n  * Reddit\n  * Telegram\n  * Tumblr\n  * Twitter\n  * Viber\n  * Weibo\n  * Whatsapp\n  * Linkedin\n  * VKShare\n  * Mailru\n  * Livejournal\n  * Workplace\n  * Pocket\n  * Instapaper\n  * Hatena\n  * FacebookMessenger\n  * Email\n  * Gab\n* Share counts\n  * FacebookShareCount\n  * HatenaShareCount\n  * OKShareCount\n  * PinterestShareCount\n  * TumblrShareCount\n  * VKShareCount\n* Icons\n\n## 🔧 Install\n\nnext-share is available on npm. It can be installed with the following command:\n\n```\nnpm install next-share --save\n```\n\nnext-share is available on yarn as well. It can be installed with the following command:\n\n```\nyarn add next-share --save\n```\n\n## 💡 Usage of ShareButton\n\n### 🎀 Facebook\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  FacebookShareButton,\n  FacebookIcon,\n} from 'next-share'\n\n\u003cFacebookShareButton\n  url={'https://github.com/next-share'}\n  quote={'next-share is a social share buttons for your next React apps.'}\n  hashtag={'#nextshare'}\n\u003e\n  \u003cFacebookIcon size={32} round /\u003e\n\u003c/FacebookShareButton\u003e\n```\n\n#### 📖 FacebookShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| quote | string |  | A quote to be shared. | ❌ |\n| hashtag | string |  | Hashtag to be shared. | ❌ |\n| windowWidth | number | 550 | Opened window width. | ❌ |\n| windowHeight | number | 400 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [FacebookIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Line\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  LineShareButton,\n  LineIcon,\n} from 'next-share'\n\n\u003cLineShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cLineIcon /\u003e\n\u003c/LineShareButton\u003e\n```\n\n#### 📖 LineShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| windowWidth | number | 500 | Opened window width. | ❌ |\n| windowHeight | number | 500 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [LineIcon props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Pinterest\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  PinterestShareButton,\n  PinterestIcon,\n} from 'next-share'\n\n\u003cPinterestShareButton\n  url={'https://github.com/next-share'}\n  media={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cPinterestIcon size={32} round /\u003e\n\u003c/PinterestShareButton\u003e\n```\n\n#### 📖 PinterestShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| media | string |  | The image URL that will be pinned. | ✅ |\n| description | string |  | The description of the shared media. | ❌ |\n| windowWidth | number | 1000 | Opened window width. | ❌ |\n| windowHeight | number | 730 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [PinterestIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Reddit\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  RedditShareButton,\n  RedditIcon,\n} from 'next-share'\n\n\u003cRedditShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cRedditIcon size={32} round /\u003e\n\u003c/RedditShareButton\u003e\n```\n\n#### 📖 RedditShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [RedditIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Telegram\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  TelegramShareButton,\n  TelegramIcon,\n} from 'next-share'\n\n\u003cTelegramShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cTelegramIcon size={32} round /\u003e\n\u003c/TelegramShareButton\u003e\n```\n\n#### 📖 TelegramShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| windowWidth | number | 550 | Opened window width. | ❌ |\n| windowHeight | number | 400 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [TelegramIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Tumblr\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  TumblrShareButton,\n  TumblrIcon,\n} from 'next-share'\n\n\u003cTumblrShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cTumblrIcon size={32} round /\u003e\n\u003c/TumblrShareButton\u003e\n```\n\n#### 📖 TumblrShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| tags | \u003ccode\u003eArray\u0026lt;string\u0026gt;\u003c/code\u003e |  |  | ❌ |\n| caption | string |  | The description of the shared page. | ❌ |\n| posttype | string | \u003ccode\u003elink\u003c/code\u003e |  | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [TumblrIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Twitter\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  TwitterShareButton,\n  TwitterIcon,\n} from 'next-share'\n\n\u003cTwitterShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cTwitterIcon size={32} round /\u003e\n\u003c/TwitterShareButton\u003e\n```\n\n#### 📖 TwitterShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| via | string |  |  | ❌ |\n| hashtags | array |  |  | ❌ |\n| related | array |  |  | ❌ |\n| windowWidth | number | 550 | Opened window width. | ❌ |\n| windowHeight | number | 400 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [TwitterIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Viber\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  ViberShareButton,\n  ViberIcon,\n} from 'next-share'\n\n\u003cViberShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n\u003e\n  \u003cViberIcon size={32} round /\u003e\n\u003c/ViberShareButton\u003e\n```\n\n#### 📖 ViberShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| separator |  |  |  | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [ViberIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Weibo\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  WeiboShareButton,\n  WeiboIcon,\n} from 'next-share'\n\n\u003cWeiboShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n  image={`${String(window.location)}/${example-image}`}\n\u003e\n  \u003cWeiboIcon size={32} round /\u003e\n\u003c/WeiboShareButton\u003e\n```\n\n#### 📖 WeiboShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| image | string |  | The image URL that will be shared. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 550 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [WeiboIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Whatsapp\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  WhatsappShareButton,\n  WhatsappIcon,\n} from 'next-share'\n\n\u003cWhatsappShareButton\n  url={'https://github.com/next-share'}\n  title={'next-share is a social share buttons for your next React apps.'}\n  separator=\":: \"\n\u003e\n  \u003cWhatsappIcon size={32} round /\u003e\n\u003c/WhatsappShareButton\u003e\n```\n\n#### 📖 WhatsappShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| separator | string |  |  | ❌ |\n| windowWidth | number | 550 | Opened window width. | ❌ |\n| windowHeight | number | 400 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [WhatsappIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Linkedin\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  LinkedinShareButton,\n  LinkedinIcon,\n} from 'next-share'\n\n\u003cLinkedinShareButton url={'https://github.com/next-share'}\u003e\n  \u003cLinkedinIcon size={32} round /\u003e\n\u003c/LinkedinShareButton\u003e\n```\n\n#### 📖 LinkedinShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| windowWidth | number | 750 | Opened window width. | ❌ |\n| windowHeight | number | 600 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\u003c!-- | title | string |  | The title of the shared page. | ❌ |\n| summary | string |  | Description of the shared page. | ❌ |\n| source | string |  | Source of the content (e.g. your website or application name). | ❌ | --\u003e\n\nHow do you use things like `title`, `summary`, etc.?\n\nUse `og` tags in the `\u003chead\u003e` block of the HTML.\n\n```html\n\u003cmeta property='og:image' content='' /\u003e\n\u003cmeta property='og:title' content='' /\u003e\n\u003cmeta property='og:description' content='' /\u003e\n```\n\n#### 📖 [LinkedinIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 VK\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  VKShareButton,\n  VKIcon,\n} from 'next-share'\n\n\u003cVKShareButton\n  url={'https://github.com/next-share'}\n  image={'./next-share.png'}\n\u003e\n  \u003cVKIcon size={32} round /\u003e\n\u003c/VKShareButton\u003e\n```\n\n#### 📖 VKShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| image | string |  | An absolute link to the image that will be shared. | ❌ |\n| noParse | boolean |  | If true is passed, VK will not retrieve URL information. | ❌ |\n| noVkLinks | boolean |  | If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [VKIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Mailru\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  MailruShareButton,\n  MailruIcon,\n} from 'next-share'\n\n\u003cMailruShareButton\n  url={'https://github.com/next-share'}\n  title={'Next Share'}\n\u003e\n  \u003cMailruIcon size={32} round /\u003e\n\u003c/MailruShareButton\u003e\n```\n\n#### 📖 MailruShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| description | string |  | Description of the shared page. | ❌ |\n| imageUrl | string |  | Image url of the shared page. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [MailruIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Livejournal\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  LivejournalShareButton,\n  LivejournalIcon,\n} from 'next-share'\n\n\u003cLivejournalShareButton\n  url={'https://github.com/next-share'}\n  title={'Next Share'}\n  description={'https://github.com/next-share'}\n\u003e\n  \u003cLivejournalIcon size={32} round /\u003e\n\u003c/LivejournalShareButton\u003e\n```\n\n#### 📖 LivejournalShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | The title of the shared page. | ❌ |\n| description | string |  | Description of the shared page. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [LivejournalIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Workplace\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  WorkplaceShareButton,\n  WorkplaceIcon,\n} from 'next-share'\n\n\u003cWorkplaceShareButton\n  url={'https://github.com/next-share'}\n  quote={'Next Share'}\n\u003e\n  \u003cWorkplaceIcon size={32} round /\u003e\n\u003c/WorkplaceShareButton\u003e\n```\n\n#### 📖 WorkplaceShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| quote | string |  |  | ❌ |\n| hashtag | string |  |  | ❌ |\n| windowWidth | number | 550 | Opened window width. | ❌ |\n| windowHeight | number | 400 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [WorkplaceIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Pocket\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  PocketShareButton,\n  PocketIcon,\n} from 'next-share'\n\n\u003cPocketShareButton\n  url={'https://github.com/next-share'}\n  title={'Next Share'}\n\u003e\n  \u003cPocketIcon size={32} round /\u003e\n\u003c/PocketShareButton\u003e\n```\n\n#### 📖 PocketShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| 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. | ❌ |\n| windowWidth | number | 500 | Opened window width. | ❌ |\n| windowHeight | number | 500 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [PocketIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Instapaper\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  InstapaperShareButton,\n  InstapaperIcon,\n} from 'next-share'\n\n\u003cInstapaperShareButton\n  url={'https://github.com/next-share'}\n  title={'Next Share'}\n\u003e\n  \u003cInstapaperIcon size={32} round /\u003e\n\u003c/InstapaperShareButton\u003e\n```\n\n#### 📖 InstapaperShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | Title of the shared page. | ❌ |\n| description | string |  | Description of the shared page. | ❌ |\n| windowWidth | number | 500 | Opened window width. | ❌ |\n| windowHeight | number | 500 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [InstapaperIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Hatena\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  HatenaShareButton,\n  HatenaIcon,\n} from 'next-share'\n\n\u003cHatenaShareButton\n  url={'https://github.com/next-share'}\n  title={'Next Share'}\n\u003e\n  \u003cHatenaIcon size={32} round /\u003e\n\u003c/HatenaShareButton\u003e\n```\n\n#### 📖 HatenaShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | Title of the shared page. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 460 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [HatenaIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 FacebookMessenger\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  FacebookMessengerShareButton,\n  FacebookMessengerIcon,\n} from 'next-share'\n\n\u003cFacebookMessengerShareButton\n  url={'https://github.com/next-share'}\n  appId={''}\n\u003e\n  \u003cFacebookMessengerIcon size={32} round /\u003e\n\u003c/FacebookMessengerShareButton\u003e\n```\n\n#### 📖 FacebookMessengerShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| appId | string |  | Facebook application id. | ✅ |\n| redirectUri | string |  | The URL to redirect to after sharing (default: the shared url). | ❌ |\n| to | string |  | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | ❌ |\n| windowWidth | number | 1000 | Opened window width. | ❌ |\n| windowHeight | number | 820 | Opened window height. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [FacebookMessengerIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Email\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  EmailShareButton,\n  EmailIcon,\n} from 'next-share'\n\n\u003cEmailShareButton\n  url={'https://github.com/next-share'}\n  subject={'Next Share'}\n  body=\"body\"\n\u003e\n  \u003cEmailIcon size={32} round /\u003e\n\u003c/EmailShareButton\u003e\n```\n\n#### 📖 EmailShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| subject | string |  |  | ❌ |\n| body | string |  |  | ❌ |\n| separator | string |  |  | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n#### 📖 [EmailIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n### 🎀 Gab\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  GabShareButton,\n  GabIcon,\n} from 'next-share'\n\n\u003cGabShareButton\n  url={'https://github.com/next-share'}\n  title={'Next Share'}\n\u003e\n  \u003cGabIcon size={32} round /\u003e\n\u003c/GabShareButton\u003e\n```\n\n#### 📖 GabShareButton Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| children | node |  | React component, HTML element or string. | ✅ |\n| url | string |  | The URL of the shared page. | ✅ |\n| title | string |  | Title of the shared page. | ❌ |\n| windowWidth | number | 660 | Opened window width. | ❌ |\n| windowHeight | number | 640 | Opened window height. | ❌ |\n\n#### 📖 [GabIcon Props](https://github.com/Bunlong/next-share#-icons-props)\n\n## 📚 Icons Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| size | number |  | Icon size in pixels. | ❌ |\n| round | boolean |  | Show round or rectangle. | ❌ |\n| borderRadius | number |  | Set rounded corners if using round icon. | ❌ |\n| bgStyle | object |  | Customize background style. | ❌ |\n| iconFillColor | string | \u003ccode\u003ewhite\u003c/code\u003e | Customize icon fill color. | ❌ |\n| blankTarget | boolean | false | Open share window in a new tab if set to `true`. | ❌ |\n\n## 💡 Usage of ShareCount\n\n### 🎀 Facebook\n\n#### 👨‍💻 Code\n\n```js\nimport { FacebookShareCount } from 'next-share'\n\n\u003cFacebookShareCount\n  url={'https://github.com/next-share'}\n  appId={''}\n  appSecret={''}\n/\u003e\n\n\u003cFacebookShareCount\n  url={'https://github.com/next-share'}\n  appId={''}\n  appSecret={''}\n\u003e\n  {shareCount =\u003e \u003cspan className=\"wrapper\"\u003e{shareCount}\u003c/span\u003e}\n\u003c/FacebookShareCount\u003e\n```\n\n#### 📖 FacebookShareCount Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| url | string |  | The URL of the shared page. | ✅ |\n| appId | string |  | Facebook application id. | ✅ |\n| appSecret | string |  | Facebook application secret. | ✅ |\n| children | node |  | React component, HTML element or string. | ❌ |\n\n### 🎀 Hatena\n\n#### 👨‍💻 Code\n\n```js\nimport { HatenaShareCount } from 'next-share'\n\n\u003cHatenaShareCount url={'https://github.com/next-share'} /\u003e\n\n\u003cHatenaShareCount url={'https://github.com/next-share'}\u003e\n  {shareCount =\u003e \u003cspan className=\"wrapper\"\u003e{shareCount}\u003c/span\u003e}\n\u003c/HatenaShareCount\u003e\n```\n\n#### 📖 HatenaShareCount Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| url | string |  | The URL of the shared page. | ✅ |\n| children | node |  | React component, HTML element or string. | ❌ |\n\n### 🎀 OK\n\n#### 👨‍💻 Code\n\n```js\nimport { OKShareCount } from 'next-share'\n\n\u003cOKShareCount url={'https://github.com/next-share'} /\u003e\n\n\u003cOKShareCount url={'https://github.com/next-share'}\u003e\n  {shareCount =\u003e \u003cspan className=\"wrapper\"\u003e{shareCount}\u003c/span\u003e}\n\u003c/OKShareCount\u003e\n```\n\n#### 📖 OKShareCount Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| url | string |  | The URL of the shared page. | ✅ |\n| children | node |  | React component, HTML element or string. | ❌ |\n\n### 🎀 Pinterest\n\n#### 👨‍💻 Code\n\n```js\nimport { PinterestShareCount } from 'next-share'\n\n\u003cPinterestShareCount url={'https://github.com/next-share'} /\u003e\n\n\u003cPinterestShareCount url={'https://github.com/next-share'}\u003e\n  {shareCount =\u003e \u003cspan className=\"wrapper\"\u003e{shareCount}\u003c/span\u003e}\n\u003c/PinterestShareCount\u003e\n```\n\n#### 📖 PinterestShareCount Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| url | string |  | The URL of the shared page. | ✅ |\n| children | node |  | React component, HTML element or string. | ❌ |\n\n### 🎀 Tumblr\n\n#### 👨‍💻 Code\n\n```js\nimport { TumblrShareCount } from 'next-share'\n\n\u003cTumblrShareCount url={'https://github.com/next-share'} /\u003e\n\n\u003cTumblrShareCount url={'https://github.com/next-share'}\u003e\n  {shareCount =\u003e \u003cspan className=\"wrapper\"\u003e{shareCount}\u003c/span\u003e}\n\u003c/TumblrShareCount\u003e\n```\n\n#### 📖 TumblrShareCount Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| url | string |  | The URL of the shared page. | ✅ |\n| children | node |  | React component, HTML element or string. | ❌ |\n\n### 🎀 VK\n\n#### 👨‍💻 Code\n\n```js\nimport { VKShareCount } from 'next-share'\n\n\u003cVKShareCount url={'https://github.com/next-share'} /\u003e\n\n\u003cVKShareCount url={'https://github.com/next-share'}\u003e\n  {shareCount =\u003e \u003cspan className=\"wrapper\"\u003e{shareCount}\u003c/span\u003e}\n\u003c/VKShareCount\u003e\n```\n\n#### 📖 VKShareCount Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| url | string |  | The URL of the shared page. | ✅ |\n| children | node |  | React component, HTML element or string. | ❌ |\n\n## 💡 Usage of Icon\n\n#### 👨‍💻 Code\n\n```js\nimport {\n  EmailIcon,\n  FacebookIcon,\n  FacebookMessengerIcon,\n  GithubIcon,\n  HatenaIcon,\n  InstagramIcon,\n  InstapaperIcon,\n  LineIcon,\n  LinkedinIcon,\n  LivejournalIcon,\n  MailruIcon,\n  OKIcon,\n  PinterestIcon,\n  PocketIcon,\n  RedditIcon,\n  SpotifyIcon,\n  TelegramIcon,\n  TumblrIcon,\n  TwitterIcon,\n  ViberIcon,\n  VKIcon,\n  WeiboIcon,\n  WhatsappIcon,\n  WorkplaceIcon,\n} from 'next-share'\n```\n\n#### 📖 Props\n\n| Props | Type | Default | Description | Required |\n| :--- | :--- | :--- | :--- | :--- |\n| size | number |  |  Icon size in pixels. | ❌ |\n| round | boolean |  | Whether to show round or rect icons. | ❌ |\n| borderRadius | number |  | Allow rounded corners if using rect icons. | ❌ |\n| bgStyle | object |  | Customize background. | ❌ |\n| iconFillColor | string | \u003ccode\u003ewhite\u003c/code\u003e | Customize icon fill color. | ❌ |\n\n## 📜 Changelog\n\nLatest version 0.27.0 (2023-09-28):\n\n  * Upgrade TwitterIcon\n\nDetails changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-share/blob/master/CHANGELOG.md).\n\n## 💖 Wrap Up\n\nIf you think any of the `next-share` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.\n\n## 🌟 Contribution\n\nWe'd love to have your helping hand on contributions to `next-share` by forking and sending a pull request!\n\nYour contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)\n\nHow to contribute:\n\n- Open pull request with improvements\n- Discuss ideas in issues\n- Spread the word\n- Reach out with any feedback\n\n## ✨ Contributors\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/Bunlong\"\u003e\n        \u003cimg src=\"https://avatars0.githubusercontent.com/u/1308397?s=400\u0026u=945dc6b97571e2b98b659d34b1c81ae2514046bf\u0026v=4\" width=\"100\" alt=\"Bunlong\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eBunlong\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/Akirtovskis\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/25903618?v=4\" width=\"100\" alt=\"Arturs Kirtovskis\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eArturs Kirtovskis\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/helloitsm3\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/13825491?v=4\" width=\"100\" alt=\"Sean\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eSean\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/stevescavo\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/2171570?v=4\" width=\"100\" alt=\"Steve Scavo\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eSteve Scavo\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/me4502\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/546754?v=4\" width=\"100\" alt=\"Maddy Miller\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eMaddy Miller\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/joemcbroom\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/22060335?v=4\" width=\"100\" alt=\"Joe McBroom\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eJoe McBroom\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/lenakotlyar\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/123081081?v=4\" width=\"100\" alt=\"Lena Kotlyar\" /\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\n          \u003cb\u003eLena Kotlyar\u003c/b\u003e\n        \u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## 👨‍👩‍👦 Advertisement\n\nYou maybe interested.\n\n* [React Patterns](https://github.com/reactpatterns/reactpatterns) – React patterns \u0026 techniques to use in development for React Developer.\n* [React Papaparse](https://github.com/Bunlong/react-papaparse) –  The fastest in-browser CSV (or delimited text) parser for React.\n* [Next QRCode](https://github.com/bunlong/next-qrcode) – React hooks for generating QR code for your next React apps.\n* [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps.\n\n## ⚖️ License\n\nThe MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\u003c!-- ======= Development =======\n\nTo use hook in development =\u003e https://reactjs.org/warnings/invalid-hook-call-warning.html\n\n====================== --\u003e\n\n\u003c!-- ======= Sticky =======\n\nimport React, { Component, CSSProperties } from 'react';\n\nconst styles = {\n  sticky: {\n    position: 'fixed',\n    top: '50%',\n    '-webkit-transform': 'translateY(-50%)',\n    '-ms-transform': 'translateY(-50%)',\n    transform: 'translateY(-50%)',\n    display: 'grid',\n    left: 0,\n    border: 'none',\n  } as CSSProperties,\n  left: {\n    left: 0,\n  },\n  right: {\n    right: 0,\n  },\n};\n\ninterface Props {\n  children: React.ReactNode;\n}\n\nexport default class Sticky extends Component\u003cProps\u003e {\n  render() {\n    return (\n      \u003cdiv style={styles.sticky}\u003e\n        {this.props.children}\n      \u003c/div\u003e\n    );\n  }\n}\n\n====================== --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbunlong%2Fnext-share","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbunlong%2Fnext-share","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbunlong%2Fnext-share/lists"}