Skip to content

Social media share buttons and share counts for your next React apps.

License

Notifications You must be signed in to change notification settings

Bunlong/next-share

Repository files navigation

next-share

Social media share buttons for your next React apps.

downloads downloads

NPM npm bundle size Build Status JavaScript Style Guide

next-share

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

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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='' />

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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. ❌

πŸŽ€ 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
Bunlong
Arturs Kirtovskis
Arturs Kirtovskis
Sean
Sean
Steve Scavo
Steve Scavo
Maddy Miller
Maddy Miller
Joe McBroom
Joe McBroom
Lena Kotlyar
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 License: MIT