next-social-sharer
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
- Livejournal
- Workplace
- Pocket
- Instapaper
- Hatena
- FacebookMessenger
- Email
💡 Usage
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
✅ |
title |
string |
|
The title of the shared page. |
❌ |
summary |
string |
|
Description of the shared page. |
❌ |
source |
string |
|
Source of the content (e.g. your website or application name). |
❌ |
windowWidth |
number |
750 |
Opened window width. |
❌ |
windowHeight |
number |
600 |
Opened window height. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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. |
❌ |
🎀 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 |
|
|
❌ |
📚 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. |
❌ |
📜 Changelog
Changes in each release are documented in the CHANGELOG.md.
⚖️ License
The MIT License 