next-share
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
🔧 Install
next-share is available on npm. It can be installed with the following command:
npm install next-share --save
next-share is available on yarn as well. It can be installed with the following command:
yarn add next-share --save
💡 Usage of ShareButton
🎀 Facebook
👨💻 Code
import {
FacebookShareButton,
FacebookIcon,
} from 'next-share'
<FacebookShareButton
url={'https://github.com/next-share'}
quote={'next-share is a social share buttons for your next React apps.'}
hashtag={'#nextshare'}
>
<FacebookIcon size={32} round />
</FacebookShareButton>
📖 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 . |
❌ |
🎀 Line
👨💻 Code
import {
LineShareButton,
LineIcon,
} from 'next-share'
<LineShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>
<LineIcon />
</LineShareButton>
📖 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 . |
❌ |
🎀 Pinterest
👨💻 Code
import {
PinterestShareButton,
PinterestIcon,
} from 'next-share'
<PinterestShareButton
url={'https://github.com/next-share'}
media={'next-share is a social share buttons for your next React apps.'}
>
<PinterestIcon size={32} round />
</PinterestShareButton>
📖 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 . |
❌ |
🎀 Reddit
👨💻 Code
import {
RedditShareButton,
RedditIcon,
} from 'next-share'
<RedditShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>
<RedditIcon size={32} round />
</RedditShareButton>
📖 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 . |
❌ |
🎀 Telegram
👨💻 Code
import {
TelegramShareButton,
TelegramIcon,
} from 'next-share'
<TelegramShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>
<TelegramIcon size={32} round />
</TelegramShareButton>
📖 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 . |
❌ |
🎀 Tumblr
👨💻 Code
import {
TumblrShareButton,
TumblrIcon,
} from 'next-share'
<TumblrShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>
<TumblrIcon size={32} round />
</TumblrShareButton>
📖 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 . |
❌ |
🎀 Twitter
👨💻 Code
import {
TwitterShareButton,
TwitterIcon,
} from 'next-share'
<TwitterShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>
<TwitterIcon size={32} round />
</TwitterShareButton>
📖 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 . |
❌ |
🎀 Viber
👨💻 Code
import {
ViberShareButton,
ViberIcon,
} from 'next-share'
<ViberShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>
<ViberIcon size={32} round />
</ViberShareButton>
📖 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 . |
❌ |
🎀 Weibo
👨💻 Code
import {
WeiboShareButton,
WeiboIcon,
} from 'next-share'
<WeiboShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
image={`${String(window.location)}/${example-image}`}
>
<WeiboIcon size={32} round />
</WeiboShareButton>
📖 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 . |
❌ |
🎀 Whatsapp
👨💻 Code
import {
WhatsappShareButton,
WhatsappIcon,
} from 'next-share'
<WhatsappShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
separator=":: "
>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
📖 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 . |
❌ |
🎀 Linkedin
👨💻 Code
import {
LinkedinShareButton,
LinkedinIcon,
} from 'next-share'
<LinkedinShareButton url={'https://github.com/next-share'}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
📖 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 . |
❌ |
How do you use things like title
, summary
, etc.?
Use og
tags in the <head>
block of the HTML.
<meta property='og:image' content='' />
<meta property='og:title' content='' />
<meta property='og:description' content='' />
🎀 VK
👨💻 Code
import {
VKShareButton,
VKIcon,
} from 'next-share'
<VKShareButton
url={'https://github.com/next-share'}
image={'./next-share.png'}
>
<VKIcon size={32} round />
</VKShareButton>
📖 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 . |
❌ |
🎀 Mailru
👨💻 Code
import {
MailruShareButton,
MailruIcon,
} from 'next-share'
<MailruShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<MailruIcon size={32} round />
</MailruShareButton>
📖 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 . |
❌ |
🎀 Livejournal
👨💻 Code
import {
LivejournalShareButton,
LivejournalIcon,
} from 'next-share'
<LivejournalShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
description={'https://github.com/next-share'}
>
<LivejournalIcon size={32} round />
</LivejournalShareButton>
📖 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 . |
❌ |
🎀 Workplace
👨💻 Code
import {
WorkplaceShareButton,
WorkplaceIcon,
} from 'next-share'
<WorkplaceShareButton
url={'https://github.com/next-share'}
quote={'Next Share'}
>
<WorkplaceIcon size={32} round />
</WorkplaceShareButton>
📖 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 . |
❌ |
🎀 Pocket
👨💻 Code
import {
PocketShareButton,
PocketIcon,
} from 'next-share'
<PocketShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<PocketIcon size={32} round />
</PocketShareButton>
📖 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 . |
❌ |
🎀 Instapaper
👨💻 Code
import {
InstapaperShareButton,
InstapaperIcon,
} from 'next-share'
<InstapaperShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<InstapaperIcon size={32} round />
</InstapaperShareButton>
📖 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 . |
❌ |
🎀 Hatena
👨💻 Code
import {
HatenaShareButton,
HatenaIcon,
} from 'next-share'
<HatenaShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<HatenaIcon size={32} round />
</HatenaShareButton>
📖 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 . |
❌ |
🎀 FacebookMessenger
👨💻 Code
import {
FacebookMessengerShareButton,
FacebookMessengerIcon,
} from 'next-share'
<FacebookMessengerShareButton
url={'https://github.com/next-share'}
appId={''}
>
<FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>
📖 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 . |
❌ |
🎀 Email
👨💻 Code
import {
EmailShareButton,
EmailIcon,
} from 'next-share'
<EmailShareButton
url={'https://github.com/next-share'}
subject={'Next Share'}
body="body"
>
<EmailIcon size={32} round />
</EmailShareButton>
📖 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 . |
❌ |
🎀 Gab
👨💻 Code
import {
GabShareButton,
GabIcon,
} from 'next-share'
<GabShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<GabIcon size={32} round />
</GabShareButton>
📖 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. |
❌ |
📚 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 . |
❌ |
💡 Usage of ShareCount
🎀 Facebook
👨💻 Code
import { FacebookShareCount } from 'next-share'
<FacebookShareCount
url={'https://github.com/next-share'}
appId={''}
appSecret={''}
/>
<FacebookShareCount
url={'https://github.com/next-share'}
appId={''}
appSecret={''}
>
{shareCount => <span className="wrapper">{shareCount}</span>}
</FacebookShareCount>
📖 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. |
❌ |
🎀 Hatena
👨💻 Code
import { HatenaShareCount } from 'next-share'
<HatenaShareCount url={'https://github.com/next-share'} />
<HatenaShareCount url={'https://github.com/next-share'}>
{shareCount => <span className="wrapper">{shareCount}</span>}
</HatenaShareCount>
📖 HatenaShareCount Props
Props |
Type |
Default |
Description |
Required |
url |
string |
|
The URL of the shared page. |
✅ |
children |
node |
|
React component, HTML element or string. |
❌ |
🎀 OK
👨💻 Code
import { OKShareCount } from 'next-share'
<OKShareCount url={'https://github.com/next-share'} />
<OKShareCount url={'https://github.com/next-share'}>
{shareCount => <span className="wrapper">{shareCount}</span>}
</OKShareCount>
📖 OKShareCount Props
Props |
Type |
Default |
Description |
Required |
url |
string |
|
The URL of the shared page. |
✅ |
children |
node |
|
React component, HTML element or string. |
❌ |
🎀 Pinterest
👨💻 Code
import { PinterestShareCount } from 'next-share'
<PinterestShareCount url={'https://github.com/next-share'} />
<PinterestShareCount url={'https://github.com/next-share'}>
{shareCount => <span className="wrapper">{shareCount}</span>}
</PinterestShareCount>
📖 PinterestShareCount Props
Props |
Type |
Default |
Description |
Required |
url |
string |
|
The URL of the shared page. |
✅ |
children |
node |
|
React component, HTML element or string. |
❌ |
🎀 Tumblr
👨💻 Code
import { TumblrShareCount } from 'next-share'
<TumblrShareCount url={'https://github.com/next-share'} />
<TumblrShareCount url={'https://github.com/next-share'}>
{shareCount => <span className="wrapper">{shareCount}</span>}
</TumblrShareCount>
📖 TumblrShareCount Props
Props |
Type |
Default |
Description |
Required |
url |
string |
|
The URL of the shared page. |
✅ |
children |
node |
|
React component, HTML element or string. |
❌ |
🎀 VK
👨💻 Code
import { VKShareCount } from 'next-share'
<VKShareCount url={'https://github.com/next-share'} />
<VKShareCount url={'https://github.com/next-share'}>
{shareCount => <span className="wrapper">{shareCount}</span>}
</VKShareCount>
📖 VKShareCount Props
Props |
Type |
Default |
Description |
Required |
url |
string |
|
The URL of the shared page. |
✅ |
children |
node |
|
React component, HTML element or string. |
❌ |
📜 Changelog
Latest version 0.19.0 (2022-10-17):
- Add blankTarget props to open up a new tab
Details changes for each release are documented in the CHANGELOG.md.
💖 Wrap Up
If 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.
🌟 Contribution
We'd love to have your helping hand on contributions to next-share
by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
✨ Contributors
👨👩👦 Advertisement
You maybe interested.
-
React Patterns – React patterns & techniques to use in development for React Developer.
-
React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
-
Next QRCode – React hooks for generating QR code for your next React apps.
-
Next Time Ago – A lightweight tiny time-ago component for your next React apps.
⚖️ License
The MIT License 