next-share vs react-share vs vue-social-sharing

Social Media Sharing Components for Web Applications

next-share, react-share, and vue-social-sharing are specialized libraries that simplify adding social media sharing functionality to web applications. They provide pre-built, platform-specific components (e.g., Facebook, Twitter, LinkedIn) that handle URL generation, popup management, and basic styling. Each library is tightly coupled to its respective frontend framework — next-share for Next.js, react-share for general React applications, and vue-social-sharing for Vue.js projects — ensuring seamless integration with framework-specific patterns like SSR, hydration, and component composition.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package	Downloads	Stars	Size	Issues	Publish	License
Package	Downloads	Stars	Size	Issues	Publish	License
next-share	0	263	154 kB	42	3 years ago	MIT
react-share	0	2,802	674 kB	186	25 days ago	MIT
vue-social-sharing	0	1,378	35.4 kB	18	-	MIT

Social Sharing Libraries Compared: next-share vs react-share vs vue-social-sharing

When building modern web applications, adding social sharing buttons is a common requirement. The three libraries — next-share, react-share, and vue-social-sharing — each target different frontend ecosystems but solve the same core problem: making it easy to share content on platforms like Twitter, Facebook, LinkedIn, and more. However, their architecture, API design, and framework integration differ significantly. Let’s break down how they work in practice.

🧩 Framework Integration: React vs Next.js vs Vue

react-share is built for React applications and provides a set of reusable components that work in any React environment (CRA, Vite, custom setups).

// react-share example
import { FacebookShareButton, TwitterShareButton } from 'react-share';

function ShareButtons() {
  return (
    <div>
      <FacebookShareButton url="https://example.com" quote="Check this out!">
        Share on Facebook
      </FacebookShareButton>
      <TwitterShareButton url="https://example.com" title="Check this out!">
        Share on Twitter
      </TwitterShareButton>
    </div>
  );
}

next-share is specifically designed for Next.js applications and leverages Next.js-specific patterns like server-side rendering compatibility and dynamic imports. It also includes components optimized for Next.js’s image optimization and routing.

// next-share example
import { FacebookIcon, FacebookShareButton } from 'next-share';

export default function Share() {
  return (
    <FacebookShareButton url="https://example.com" quote="Check this out!">
      <FacebookIcon size={32} />
    </FacebookShareButton>
  );
}

vue-social-sharing targets Vue 2/3 applications and provides Vue components with props-based configuration. It integrates naturally with Vue’s reactivity system and component lifecycle.

<!-- vue-social-sharing example -->
<template>
  <div>
    <facebook-share :url="url" :quote="quote">
      Share on Facebook
    </facebook-share>
    <twitter-share :url="url" :title="title">
      Share on Twitter
    </twitter-share>
  </div>
</template>

<script>
import { FacebookShare, TwitterShare } from 'vue-social-sharing';

export default {
  components: { FacebookShare, TwitterShare },
  data() {
    return {
      url: 'https://example.com',
      quote: 'Check this out!',
      title: 'Check this out!'
    };
  }
};
</script>

🔌 Component Architecture: Declarative vs Configurable

All three libraries use a declarative component model, but their internal implementation varies.

react-share uses controlled components where you pass props like url, title, and quote. Each button renders an <a> or <button> tag that opens a popup or navigates to the platform’s share URL.
next-share follows a similar pattern but includes Next.js-aware icons (like FacebookIcon) that are pre-styled and compatible with Next.js’s Image component if needed. It also supports dynamic imports for code splitting.
vue-social-sharing uses Vue single-file components with props. It also supports global registration and directive-based usage for simpler integrations.

📱 Mobile and Popup Behavior

All three libraries open sharing dialogs using window.open() for desktop browsers. On mobile, they typically fall back to navigating directly to the platform’s share URL (since popups are often blocked).

However, react-share and next-share expose a beforeOnClick prop to customize behavior before the popup opens:

// react-share / next-share
<FacebookShareButton
  url="https://example.com"
  beforeOnClick={() => console.log('About to share')}
>
  Share
</FacebookShareButton>

vue-social-sharing uses event handlers like @click or @share-start for similar customization:

<facebook-share
  :url="url"
  @share-start="onShareStart"
/>

🎨 Styling and Customization

react-share: Components render plain HTML elements with minimal default styling. You style them via CSS classes or inline styles passed through the className or style props.
next-share: Includes optional icon components with built-in sizing and hover effects. Icons can be customized via size, round, and bgStyle props.

<FacebookIcon size={40} round={true} bgStyle={{ fill: '#3b5998' }} />

vue-social-sharing: Provides basic default styles but encourages overriding via scoped CSS or global classes. Also supports custom templates via slots in some versions.

⚙️ Platform Support and Extensibility

All three libraries support major platforms: Facebook, Twitter/X, LinkedIn, Pinterest, WhatsApp, Telegram, Reddit, and email.

react-share and next-share have nearly identical platform coverage since next-share was inspired by react-share.
vue-social-sharing supports the same core platforms but may lag slightly in adopting newer ones (e.g., Bluesky or Threads) depending on release cadence.

None of the libraries allow easy addition of custom platforms without forking or wrapping, as platform logic is hardcoded into each component.

🔄 SSR and Hydration Considerations

react-share: Works in SSR environments but requires guarding window usage if used outside browser context (though most components only trigger actions on click, so SSR is generally safe).
next-share: Explicitly designed for Next.js SSR and SSG. No extra setup needed; components are safe to render on the server.
vue-social-sharing: Compatible with Vue’s SSR (Nuxt.js) but may require client-only mounting if using features that rely on window during render (though typical usage is click-triggered, so it’s usually fine).

🛠️ Real-World Trade-offs

Use `react-share` if:

You’re in a standard React app (not Next.js)
You want maximum flexibility in styling
You need a mature, widely adopted solution

Use `next-share` if:

You’re building a Next.js app
You want pre-built, styled icons that integrate well with Next.js conventions
You prefer a library that’s optimized for the Next.js ecosystem

Use `vue-social-sharing` if:

You’re working in a Vue 2 or Vue 3 project
You want Vue-native components with reactive props
Your team prefers Vue’s composition and templating model

📊 Summary Table

Feature	`react-share`	`next-share`	`vue-social-sharing`
Framework	React	Next.js	Vue 2/3
SSR Safe	✅ (with caveats)	✅	✅ (with Nuxt)
Built-in Icons	❌	✅	❌
Styling Approach	CSS classes / inline	Props + pre-styled icons	Scoped CSS / classes
Event Hooks	`beforeOnClick`	`beforeOnClick`	`@share-start`, etc.
Platform Coverage	Broad	Broad	Broad

💡 Final Recommendation

Choose based on your framework stack, not feature differences — because under the hood, all three do the same thing: generate share URLs and open popups.

React app? → react-share
Next.js app? → next-share
Vue app? → vue-social-sharing

Trying to use react-share in a Vue project (or vice versa) will create unnecessary friction. Stick to the ecosystem-native solution for smoother integration, better TypeScript support, and fewer hydration surprises.

How to Choose: next-share vs react-share vs vue-social-sharing

next-share:
Choose next-share if you're building a Next.js application and want social sharing components that are optimized for Next.js conventions, including built-in icon components with responsive sizing and SSR compatibility. It avoids the need for manual window checks and integrates smoothly with Next.js's build and routing systems.
react-share:
Choose react-share if you're working in a standard React application (outside of Next.js) and need a lightweight, flexible library with broad platform support and minimal styling assumptions. It gives you full control over presentation while handling the complexity of share URL generation.
vue-social-sharing:
Choose vue-social-sharing if your project uses Vue 2 or Vue 3 and you want native Vue components that leverage Vue's reactivity and templating system. It provides a declarative, props-driven API that fits naturally into Vue's component model and supports both global and local registration.

Popular Comparisons

next-share

react-share

vue-social-sharing

README for next-share

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	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

Social Media Sharing Components for Web Applications

Npm Package Weekly Downloads Trend

Github Stars Ranking

Stat Detail

Social Sharing Libraries Compared: next-share vs react-share vs vue-social-sharing

🧩 Framework Integration: React vs Next.js vs Vue

🔌 Component Architecture: Declarative vs Configurable

📱 Mobile and Popup Behavior

🎨 Styling and Customization

⚙️ Platform Support and Extensibility

🔄 SSR and Hydration Considerations

🛠️ Real-World Trade-offs

Use react-share if:

Use next-share if:

Use vue-social-sharing if:

📊 Summary Table

💡 Final Recommendation

How to Choose: next-share vs react-share vs vue-social-sharing

Popular Comparisons

Similar Npm Packages to next-share

README for next-share

next-share

🎁 Features

🔧 Install

💡 Usage of ShareButton

🎀 Facebook

👨‍💻 Code

📖 FacebookShareButton Props

📖 FacebookIcon Props

🎀 Line

👨‍💻 Code

📖 LineShareButton Props

📖 LineIcon props

🎀 Pinterest

👨‍💻 Code

📖 PinterestShareButton Props

📖 PinterestIcon Props

🎀 Reddit

👨‍💻 Code

📖 RedditShareButton Props

📖 RedditIcon Props

🎀 Telegram

👨‍💻 Code

📖 TelegramShareButton Props

📖 TelegramIcon Props

🎀 Tumblr

👨‍💻 Code

📖 TumblrShareButton Props

📖 TumblrIcon Props

🎀 Twitter

👨‍💻 Code

📖 TwitterShareButton Props

📖 TwitterIcon Props

🎀 Viber

👨‍💻 Code

📖 ViberShareButton Props

📖 ViberIcon Props

🎀 Weibo

👨‍💻 Code

📖 WeiboShareButton Props

📖 WeiboIcon Props

🎀 Whatsapp

👨‍💻 Code

📖 WhatsappShareButton Props

📖 WhatsappIcon Props

🎀 Linkedin

👨‍💻 Code

📖 LinkedinShareButton Props

📖 LinkedinIcon Props

🎀 VK

👨‍💻 Code

📖 VKShareButton Props

📖 VKIcon Props

🎀 Mailru

👨‍💻 Code

📖 MailruShareButton Props

📖 MailruIcon Props

🎀 Livejournal

👨‍💻 Code

📖 LivejournalShareButton Props

Use `react-share` if:

Use `next-share` if:

Use `vue-social-sharing` if: