next-share

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
• Icons

🔧 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.	❌

📖 FacebookIcon Props

🎀 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.	❌

📖 LineIcon props

🎀 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.	❌

📖 PinterestIcon Props

🎀 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.	❌

📖 RedditIcon Props

🎀 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.	❌

📖 TelegramIcon Props

🎀 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.	❌

📖 TumblrIcon Props

🎀 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.	❌

📖 TwitterIcon Props

🎀 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.	❌

📖 ViberIcon Props

🎀 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.	❌

📖 WeiboIcon Props

🎀 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.	❌

📖 WhatsappIcon Props

🎀 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='' />

📖 LinkedinIcon Props

🎀 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.	❌

📖 VKIcon Props

🎀 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.	❌

📖 MailruIcon Props

🎀 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.	❌

📖 LivejournalIcon Props

🎀 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.	❌

📖 WorkplaceIcon Props

🎀 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.	❌

📖 PocketIcon Props

🎀 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.	❌

📖 InstapaperIcon Props

🎀 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.	❌

📖 HatenaIcon Props

🎀 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.	❌

📖 FacebookMessengerIcon Props

🎀 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.	❌

📖 EmailIcon Props

🎀 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.	❌

📖 GabIcon 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.	❌

💡 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.	❌

💡 Usage of Icon

👨‍💻 Code

import {
  EmailIcon,
  FacebookIcon,
  FacebookMessengerIcon,
  GithubIcon,
  HatenaIcon,
  InstagramIcon,
  InstapaperIcon,
  LineIcon,
  LinkedinIcon,
  LivejournalIcon,
  MailruIcon,
  OKIcon,
  PinterestIcon,
  PocketIcon,
  RedditIcon,
  SpotifyIcon,
  TelegramIcon,
  TumblrIcon,
  TwitterIcon,
  ViberIcon,
  VKIcon,
  WeiboIcon,
  WhatsappIcon,
  WorkplaceIcon,
} 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.	❌

📜 Changelog

Latest version 0.27.0 (2023-09-28):

• Upgrade TwitterIcon

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

Bunlong	Arturs Kirtovskis	Sean	Steve Scavo	Maddy Miller	Joe McBroom
Lena Kotlyar

👨‍👩‍👦 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