Home>Programming related>AI Source Code
Download

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

Expand
Additional Information
Related Applications
Recommended for You
Related Information All