next-share is a social share buttons plugin for Next.js, Create React App, Gatsby.js as well as React apps.
- Compatible with both JavaScript and TypeScript
- Next Share Buttons and Next Share Icons
- Facebook
- Line
- Pinterest
- Reddit
- Telegram
- Tumblr
- Twitter
- Viber
- Weibo
- Whatsapp
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:
import {
FacebookShareButton,
FacebookIcon,
} from 'next-share'
<FacebookShareButton
url={'https://github.com/next-share'}
quote={'next-share is a social share buttons plugin for React apps.'}
hashtag={'#nextshare'}
>
<FacebookIcon />
</FacebookShareButton>
import {
LineShareButton,
LineIcon,
} from 'next-share'
<LineShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
>
<LineIcon />
</LineShareButton>
import {
PinterestShareButton,
PinterestIcon,
} from 'next-share'
<PinterestShareButton
url={'https://github.com/next-share'}
media={'next-share is a social share buttons plugin for React apps.'}
>
<PinterestIcon size={32} round />
</PinterestShareButton>
import {
RedditShareButton,
RedditIcon,
} from 'next-share'
<RedditShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
windowWidth={660}
windowHeight={460}
>
<RedditIcon size={32} round />
</RedditShareButton>
import {
TelegramShareButton,
TelegramIcon,
} from 'next-share'
<TelegramShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
>
<TelegramIcon size={32} round />
</TelegramShareButton>
import {
TumblrShareButton,
TumblrIcon,
} from 'next-share'
<TumblrShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
>
<TumblrIcon size={32} round />
</TumblrShareButton>
import {
TwitterShareButton,
TwitterIcon,
} from 'next-share'
<TwitterShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
>
<TwitterIcon size={32} round />
</TwitterShareButton>
import {
ViberShareButton,
ViberIcon,
} from 'next-share'
<ViberShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
>
<ViberIcon size={32} round />
</ViberShareButton>
import {
WeiboShareButton,
WeiboIcon,
} from 'next-share'
<WeiboShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
image={`${String(window.location)}/${example-image}`}
>
<WeiboIcon size={32} round />
</WeiboShareButton>
import {
WhatsappShareButton,
WhatsappIcon,
} from 'next-share'
<WhatsappShareButton
url={'https://github.com/next-share'}
title={'next-share is a social share buttons plugin for React apps.'}
separator=":: "
>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
Props |
Type |
Default |
Description |
Required |
size |
number |
|
Icon size in pixels. |
โ |
round |
boolean |
false |
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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React node |
|
React component, HTML element or string. |
โ
|
url |
string |
|
The URL of the shared page. |
โ
|
quote |
string |
|
A quote to be shared. |
โ |
hashtag |
string |
|
|
โ |
windowWidth |
number |
550 |
Opened window width. |
โ |
windowHeight |
number |
400 |
Opened window height. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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 |
550 |
Opened window width. |
โ |
windowHeight |
number |
400 |
Opened window height. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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 |
660 |
Opened window width. |
โ |
windowHeight |
number |
460 |
Opened window height. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
Props |
Type |
Default |
Description |
Required |
children |
React 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. |
โ |
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.
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
The MIT License