Social media share buttons for your next React apps.
- No dependencies
- Compatible with both JavaScript and TypeScript
- Share buttons for your next React app
- Line
- Telegram
- Tumblr
- Viber
- VKShare
- Mailru
- Livejournal
- Workplace
- Instapaper
- Hatena
- FacebookMessenger
- Gab
- Share counts
- FacebookShareCount
- HatenaShareCount
- OKShareCount
- PinterestShareCount
- TumblrShareCount
- VKShareCount
- Icons
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
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>
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
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>
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
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>
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
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>
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
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>
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
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>
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
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>
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
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>
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
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>
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
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>
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
import {
LinkedinShareButton,
LinkedinIcon,
} from 'next-share'
<LinkedinShareButton url={'https://github.com/next-share'}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
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
import {
VKShareButton,
VKIcon,
} from 'next-share'
<VKShareButton
url={'https://github.com/next-share'}
image={'./next-share.png'}
>
<VKIcon size={32} round />
</VKShareButton>
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
import {
MailruShareButton,
MailruIcon,
} from 'next-share'
<MailruShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<MailruIcon size={32} round />
</MailruShareButton>
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
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>
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 . |
β |
import {
WorkplaceShareButton,
WorkplaceIcon,
} from 'next-share'
<WorkplaceShareButton
url={'https://github.com/next-share'}
quote={'Next Share'}
>
<WorkplaceIcon size={32} round />
</WorkplaceShareButton>
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
import {
PocketShareButton,
PocketIcon,
} from 'next-share'
<PocketShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<PocketIcon size={32} round />
</PocketShareButton>
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
import {
InstapaperShareButton,
InstapaperIcon,
} from 'next-share'
<InstapaperShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<InstapaperIcon size={32} round />
</InstapaperShareButton>
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
import {
HatenaShareButton,
HatenaIcon,
} from 'next-share'
<HatenaShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<HatenaIcon size={32} round />
</HatenaShareButton>
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
import {
FacebookMessengerShareButton,
FacebookMessengerIcon,
} from 'next-share'
<FacebookMessengerShareButton
url={'https://github.com/next-share'}
appId={''}
>
<FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>
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 . |
β |
import {
EmailShareButton,
EmailIcon,
} from 'next-share'
<EmailShareButton
url={'https://github.com/next-share'}
subject={'Next Share'}
body="body"
>
<EmailIcon size={32} round />
</EmailShareButton>
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
import {
GabShareButton,
GabIcon,
} from 'next-share'
<GabShareButton
url={'https://github.com/next-share'}
title={'Next Share'}
>
<GabIcon size={32} round />
</GabShareButton>
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
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 . |
β |
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>
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. | β |
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>
Props | Type | Default | Description | Required |
---|---|---|---|---|
url | string | The URL of the shared page. | β | |
children | node | React component, HTML element or string. | β |
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>
Props | Type | Default | Description | Required |
---|---|---|---|---|
url | string | The URL of the shared page. | β | |
children | node | React component, HTML element or string. | β |
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>
Props | Type | Default | Description | Required |
---|---|---|---|---|
url | string | The URL of the shared page. | β | |
children | node | React component, HTML element or string. | β |
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>
Props | Type | Default | Description | Required |
---|---|---|---|---|
url | string | The URL of the shared page. | β | |
children | node | React component, HTML element or string. | β |
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>
Props | Type | Default | Description | Required |
---|---|---|---|---|
url | string | The URL of the shared page. | β | |
children | node | React component, HTML element or string. | β |
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 | 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. | β |
Latest version 0.27.0 (2023-09-28):
- Upgrade TwitterIcon
Details changes for each release are documented in the CHANGELOG.md.
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
Bunlong |
Arturs Kirtovskis |
Sean |
Steve Scavo |
Maddy Miller |
Joe McBroom |
Lena Kotlyar |
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.