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'<FacebookShareButtonurl={'https://github.com/next-share'}quote={'next-share is a social share buttons for your next React apps.'}hashtag={'#nextshare'}><FacebookIconsize={32}round/></FacebookShareButton>
import{LineShareButton,LineIcon,}from'next-share'<LineShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}><LineIcon/></LineShareButton>
import{PinterestShareButton,PinterestIcon,}from'next-share'<PinterestShareButtonurl={'https://github.com/next-share'}media={'next-share is a social share buttons for your next React apps.'}><PinterestIconsize={32}round/></PinterestShareButton>
import{RedditShareButton,RedditIcon,}from'next-share'<RedditShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}><RedditIconsize={32}round/></RedditShareButton>
import{TelegramShareButton,TelegramIcon,}from'next-share'<TelegramShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}><TelegramIconsize={32}round/></TelegramShareButton>
import{TumblrShareButton,TumblrIcon,}from'next-share'<TumblrShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}><TumblrIconsize={32}round/></TumblrShareButton>
import{TwitterShareButton,TwitterIcon,}from'next-share'<TwitterShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}><TwitterIconsize={32}round/></TwitterShareButton>
import{ViberShareButton,ViberIcon,}from'next-share'<ViberShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}><ViberIconsize={32}round/></ViberShareButton>
import{WeiboShareButton,WeiboIcon,}from'next-share'<WeiboShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}image={`${String(window.location)}/${example-image}`}><WeiboIconsize={32}round/></WeiboShareButton>
import{WhatsappShareButton,WhatsappIcon,}from'next-share'<WhatsappShareButtonurl={'https://github.com/next-share'}title={'next-share is a social share buttons for your next React apps.'}separator=":: "><WhatsappIconsize={32}round/></WhatsappShareButton>
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.
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. (βΏβ βΏβ )
Hi there,
I tried the package and for the twitter and linkedin share the popup does not get closed after sharing...It works fine for facebook.Can anyone help me fix this issue?
Upon clicking the WhatsApp Share button on a web browser on a desktop, it opens web.whatsapp.com, which prompts to scan a QR code if not already signed in.
Many people use WhatsApp Desktop App (Windows, Mac, Linux).
Currently, there's no way to open WhatsApp Desktop in the current implementation.
Solution
I've made a PR here -> #56
Might need a review and merge, if fits the usecase.
As a developer, having a github icon on my personal projects is like a very crucial thing and finding out this library has an icon for a fricking tumblr but not of github is quite surprising.
Kindly add this
Thanks for this awesome package first and foremost!
I am running to the issue same as with 'react-share', it seems like the 'quote' prop is not populating the string on Facebook's side. Twitter works fine no issue, but for some reason, the 'quote' prop does not. Can you give me any hints as to why or what's a workaround?
Would be coherent to have an option for copy to clipboard.
It could have two forms, one just a button with a confirmation (may be a tooltip) to indicate "link copied". The other form could be an input text with the link inside and that copy when clicked.
Great and useful library! But I have a problem.
When I install the latest version of this library, it adds 1060 packages with 7 high vulnerabilities. When I install v0.13.0, I only get 130 and no vulnerabilities. What's the cause of this?
Warning: n: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at n (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected]/node_modules/next-share/dist/next-share.es.js:70:2471)
I can not get title and summary to work when sharing to linkedin. Using below and url is working fine, but i don't get the expected Title and Summary, or am i missing something / doing anything wrong ?
I believe that this library can be enhanced with a custom rendered tag and custom styles.
Currently the rendered tag is button tag with inline styles. It would be great if developers can choose the tag and add a classname.
For example the syntax to be rendered as links and adding styles: <WhatsappShareButton as="a" className={styles.shareButton} styles={{ padding: 16 }}> <FontAwesomeIcon icon={{ prefix: "fab", iconName: "whatsapp }} /> </WhatsappShareButton>
How to use your library if I want to have multiple hashtags for facebook?
The document says about using a single "hashtag" of type string; but does not mention anything about multiple hashtags at all for facebook.
On desktop, all my share buttons work perfectly but after deployment and I decide to share on mobile device, it fails. I even tried the one on the docs on my mobile device and it failed.
If we could get access to the FB.ui options behind the next-share interface, something like this:
window.FB.ui({
method: 'share',
display: 'popup',
href: 'https://www.example.com/',
title: 'My Example Link',
description: 'This is a great example link for sharing!',
picture: 'https://www.example.com/image.jpg',
});
I am trying to share some url to LinkedIn with a title and a summary:
<LinkedinShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
summary={'This is a test for summary'}
>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
But it doesn't seem to work. Only the url props is working somehow. Is there any way to work around this? Thanks!