react-share

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

Install

npm install react-share

Features

• no external script loading, i.e. no dependencies on SDKs
• supports tree shaking with ES modules
• opens a popup share-window
• share buttons for:
  • Bluesky
  • Email
  • Facebook
  • Facebook Messenger
  • Gab
  • Hatena
  • Instapaper
  • Line
  • LinkedIn
  • LiveJournal
  • Mail.Ru
  • Odnoklassniki
  • Pinterest
  • Pocket
  • Reddit
  • Telegram
  • Threads
  • Tumblr
  • Viber
  • VK
  • Weibo
  • Whatsapp
  • Workplace
  • X
• share counts (deprecated)
• social media icons included in the library
• supports also custom icons

Demo

• Deployed demo (from ./demo)

• Locally: clone the repository and run npm install && npm run demo.

React compatibility

Version	Compatible React versions
5	17, 18, 19
4	^16.3, 17, 18
3.0.1	^16.3.
3	15, 16
2	15, 16
1	0.13.x, 0.14.x, 15.x.x.

API

Share buttons

All share buttons render a native <button> element and pass through standard button attributes such as aria-label, aria-labelledby, aria-describedby, name, and data-*.

Buttons and icons are separate named exports. Import only the components you use to keep tree shaking effective, and pass any custom element as children if you want to use your own icon set instead of the bundled icons.

Icon-only buttons need an accessible name. Pass aria-label or aria-labelledby when you render them in your app. htmlTitle only sets the native tooltip/title attribute and is not used as the button's accessible name.

Shared props:

Required:

• children (ReactNode): Button contents.
• url (string): URL of the shared page. Optional on all share buttons:
• beforeOnClick (() => Promise<void> | void): Runs before the share action.
• disabled (boolean): Disables click handling and adds a disabled class.
• disabledStyle (CSSProperties, default { opacity: 0.6 }): Applied when disabled is true.
• htmlTitle (string): Sets the native title attribute on the underlying button.
• onClick ((event, link) => void): Called with the click event and generated share URL after link generation. Not exposed by EmailShareButton.
• onShareWindowClose (() => void): Called after the popup closes on popup-based buttons.
• resetButtonStyle (boolean, default true): Resets native button styles unless disabled.
• windowHeight, windowWidth (number): Override popup dimensions on popup-based buttons.
• windowPosition ("windowCenter" | "screenCenter"): Controls popup positioning on popup-based buttons. Optional on popup-based share buttons:
• openShareDialogOnClick (boolean, default true): Opens the popup automatically on click. EmailShareButton does not expose this prop because it always uses mailto: navigation.

The native button title attribute uses htmlTitle so it does not conflict with network share props named title:

import { XShareButton, XIcon } from "react-share";

<XShareButton
  title="Share title sent to X"
  htmlTitle="Native button tooltip"
  url={shareUrl}
  aria-label="Share on X"
>
  <XIcon size={32} round />
</XShareButton>;

Basic example:

import { FacebookShareButton, FacebookIcon } from "react-share";

<FacebookShareButton url={shareUrl} aria-label="Share this page on Facebook">
  <FacebookIcon size={32} round />
</FacebookShareButton>;

BlueskyShareButton

Optional props:

• title (string): Title of the shared page.
• separator (string, default " "): Separator between the title and URL.

import { BlueskyShareButton, BlueskyIcon } from "react-share";

<BlueskyShareButton title="Read this next" url={shareUrl} aria-label="Share on Bluesky">
  <BlueskyIcon size={32} round />
</BlueskyShareButton>;

EmailShareButton

Optional props:

• subject (string): Email subject line.
• body (string): Text prepended before the shared URL.
• separator (string, default " "): Separator between the body and URL.
• Notes:
  • Uses mailto: navigation instead of opening a popup.
  • Does not expose openShareDialogOnClick or onClick.

import { EmailShareButton, EmailIcon } from "react-share";

<EmailShareButton
  subject="Take a look"
  body="Thought you might like this:"
  url={shareUrl}
  aria-label="Share by email"
>
  <EmailIcon size={32} round />
</EmailShareButton>;

FacebookMessengerShareButton

Extra required props:

• appId (string): Facebook application ID. Optional props:
• redirectUri (string): Redirect target after sharing. Defaults to the shared URL.
• to (string): Recipient user ID.
• Notes:
  • Mobile behavior depends on Meta's current app and dialog support.

import { FacebookMessengerShareButton, FacebookMessengerIcon } from "react-share";

<FacebookMessengerShareButton appId={appId} url={shareUrl} aria-label="Send in Messenger">
  <FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>;

FacebookShareButton

Optional props:

• hashtag (string): Hashtag to append to the shared content. Include the leading #.

import { FacebookShareButton, FacebookIcon } from "react-share";

<FacebookShareButton hashtag="#reactshare" url={shareUrl} aria-label="Share on Facebook">
  <FacebookIcon size={32} round />
</FacebookShareButton>;

GabShareButton

Optional props:

• title (string): Title of the shared page.

import { GabShareButton, GabIcon } from "react-share";

<GabShareButton title="Read this next" url={shareUrl} aria-label="Share on Gab">
  <GabIcon size={32} round />
</GabShareButton>;

HatenaShareButton

Optional props:

• title (string): Title of the shared page.

import { HatenaShareButton, HatenaIcon } from "react-share";

<HatenaShareButton title="Read this next" url={shareUrl} aria-label="Share on Hatena">
  <HatenaIcon size={32} round />
</HatenaShareButton>;

InstapaperShareButton

Optional props:

• title (string): Title of the shared page.
• description (string): Description of the shared page.

import { InstapaperShareButton, InstapaperIcon } from "react-share";

<InstapaperShareButton
  title="Read this next"
  description="Quick summary"
  url={shareUrl}
  aria-label="Save to Instapaper"
>
  <InstapaperIcon size={32} round />
</InstapaperShareButton>;

LineShareButton

Optional props:

• title (string): Title of the shared page.

import { LineShareButton, LineIcon } from "react-share";

<LineShareButton title="Read this next" url={shareUrl} aria-label="Share on Line">
  <LineIcon size={32} round />
</LineShareButton>;

LinkedinShareButton

Optional props:

• title (string): Title of the shared page.
• summary (string): Description of the shared page.
• source (string): Source label such as your app or site name.
• Notes:
  • These fields are best-effort only and may be ignored or rewritten by LinkedIn.

import { LinkedinShareButton, LinkedinIcon } from "react-share";

<LinkedinShareButton
  title="Read this next"
  summary="Quick summary"
  source="example.com"
  url={shareUrl}
  aria-label="Share on LinkedIn"
>
  <LinkedinIcon size={32} round />
</LinkedinShareButton>;

LivejournalShareButton

Optional props:

• title (string): Title of the shared page.
• description (string): Description of the shared page.

import { LivejournalShareButton, LivejournalIcon } from "react-share";

<LivejournalShareButton
  title="Read this next"
  description="Quick summary"
  url={shareUrl}
  aria-label="Share on LiveJournal"
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>;

MailruShareButton

Optional props:

• title (string): Title of the shared page.
• description (string): Description of the shared page.
• imageUrl (string): Absolute image URL to include in the share payload.

import { MailruShareButton, MailruIcon } from "react-share";

<MailruShareButton
  title="Read this next"
  description="Quick summary"
  imageUrl={imageUrl}
  url={shareUrl}
  aria-label="Share on Mail.ru"
>
  <MailruIcon size={32} round />
</MailruShareButton>;

OKShareButton

Optional props:

• title (string): Title of the shared page.
• description (string): Description of the shared page.
• image (string): Absolute image URL to include in the share payload.

import { OKShareButton, OKIcon } from "react-share";

<OKShareButton
  title="Read this next"
  description="Quick summary"
  image={imageUrl}
  url={shareUrl}
  aria-label="Share on OK"
>
  <OKIcon size={32} round />
</OKShareButton>;

PinterestShareButton

Extra required props:

• media (string): Absolute image URL to pin. Optional props:
• description (string): Description of the pin.
• pinId (string): Existing pin ID to treat new pins as repins.

import { PinterestShareButton, PinterestIcon } from "react-share";

<PinterestShareButton
  media={imageUrl}
  description="Pin this"
  url={shareUrl}
  aria-label="Pin on Pinterest"
>
  <PinterestIcon size={32} round />
</PinterestShareButton>;

PocketShareButton

Optional props:

• title (string): Title of the shared page.
• Notes:
  • If Pocket detects a title on the target page, it may ignore this prop and use page metadata instead.

import { PocketShareButton, PocketIcon } from "react-share";

<PocketShareButton title="Read this next" url={shareUrl} aria-label="Save to Pocket">
  <PocketIcon size={32} round />
</PocketShareButton>;

RedditShareButton

Optional props:

• title (string): Title of the shared page.

import { RedditShareButton, RedditIcon } from "react-share";

<RedditShareButton title="Read this next" url={shareUrl} aria-label="Share on Reddit">
  <RedditIcon size={32} round />
</RedditShareButton>;

TelegramShareButton

Optional props:

• title (string): Title of the shared page.

import { TelegramShareButton, TelegramIcon } from "react-share";

<TelegramShareButton title="Read this next" url={shareUrl} aria-label="Share on Telegram">
  <TelegramIcon size={32} round />
</TelegramShareButton>;

ThreadsShareButton

Optional props:

• title (string): Title of the shared page.
• hashtags (string[]): Deprecated compatibility prop. Ignored in v5 and removed in v6.
• related (string[]): Deprecated compatibility prop. Ignored in v5 and removed in v6.
• via (string): Deprecated compatibility prop. Ignored in v5 and removed in v6.

import { ThreadsShareButton, ThreadsIcon } from "react-share";

<ThreadsShareButton title="Read this next" url={shareUrl} aria-label="Share on Threads">
  <ThreadsIcon size={32} round />
</ThreadsShareButton>;

TumblrShareButton

Optional props:

• title (string): Title of the shared page.
• tags (string[]): Tags to attach to the post.
• caption (string): Description shown with the shared page.
• posttype (string, default "link"): Tumblr post type.

import { TumblrShareButton, TumblrIcon } from "react-share";

<TumblrShareButton
  title="Read this next"
  caption="Quick summary"
  tags={["react", "share"]}
  url={shareUrl}
  aria-label="Share on Tumblr"
>
  <TumblrIcon size={32} round />
</TumblrShareButton>;

XShareButton

Optional props:

• title (string): Title of the shared page.
• via (string): Account to attribute the share to.
• hashtags (string[]): Hashtags without the leading #.
• related (string[]): Related accounts to recommend.
• Notes:
  • X can ignore or rewrite some share fields.
  • TwitterShareButton remains available as a deprecated alias for backwards compatibility.

import { XShareButton, XIcon } from "react-share";

<XShareButton
  title="Read this next"
  via="reactshare"
  hashtags={["react", "share"]}
  url={shareUrl}
  aria-label="Share on X"
>
  <XIcon size={32} round />
</XShareButton>;

ViberShareButton

Optional props:

• title (string): Title of the shared page.
• separator (string, default " "): Separator between the title and URL.

import { ViberShareButton, ViberIcon } from "react-share";

<ViberShareButton title="Read this next" url={shareUrl} aria-label="Share on Viber">
  <ViberIcon size={32} round />
</ViberShareButton>;

VKShareButton

Optional props:

• title (string): Title of the shared page.
• image (string): Absolute image URL to include in the share payload.
• noParse (boolean): Prevent VK from retrieving URL information.
• noVkLinks (boolean): Hide profile links in the window. Relevant on mobile devices.

import { VKShareButton, VKIcon } from "react-share";

<VKShareButton
  title="Read this next"
  image={imageUrl}
  noParse
  noVkLinks
  url={shareUrl}
  aria-label="Share on VK"
>
  <VKIcon size={32} round />
</VKShareButton>;

WeiboShareButton

Optional props:

• title (string): Title of the shared page.
• image (string): Absolute image URL to include in the share payload.

import { WeiboShareButton, WeiboIcon } from "react-share";

<WeiboShareButton
  title="Read this next"
  image={imageUrl}
  url={shareUrl}
  aria-label="Share on Weibo"
>
  <WeiboIcon size={32} round />
</WeiboShareButton>;

WhatsappShareButton

Optional props:

• title (string): Title of the shared page.
• separator (string, default " "): Separator between the title and URL.
• Notes:
  • Generates an api.whatsapp.com share URL.

import { WhatsappShareButton, WhatsappIcon } from "react-share";

<WhatsappShareButton title="Read this next" url={shareUrl} aria-label="Share on WhatsApp">
  <WhatsappIcon size={32} round />
</WhatsappShareButton>;

WorkplaceShareButton

Optional props:

• quote (string): Quote to include with the share.
• hashtag (string): Hashtag to append to the share. Include the leading #.

import { WorkplaceShareButton, WorkplaceIcon } from "react-share";

<WorkplaceShareButton
  quote="Worth a read"
  hashtag="#reactshare"
  url={shareUrl}
  aria-label="Share on Workplace"
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>;

Share counts

Share count components are deprecated and will be removed in v6. They remain available in v5 as best-effort compatibility only, and upstream networks may stop returning counts without notice.

import {
  FacebookShareCount,
  HatenaShareCount,
  OKShareCount,
  PinterestShareCount,
  RedditShareCount,
  TumblrShareCount,
  VKShareCount,
} from "react-share";

Supported components:

• FacebookShareCount
• HatenaShareCount
• OKShareCount
• PinterestShareCount
• RedditShareCount
• TumblrShareCount
• VKShareCount

Shared props:

• url (string, required): URL to look up.
• children ((shareCount: number) => ReactNode, optional): Render prop for custom output.
• Standard <span> attributes such as className, aria-*, and data-*.

Example:

<FacebookShareCount url={shareUrl} />

Custom rendering:

<FacebookShareCount url={shareUrl}>
  {(shareCount) => <span className="myShareCountWrapper">{shareCount}</span>}
</FacebookShareCount>

Icons

All exported icons share the same props:

Prop	Type	Default	Description
size	number | string	64	Icon size.
round	boolean	false	Render a circular background instead of a rectangle.
borderRadius	number	0	Rounded corners when using the rectangular shape.
bgStyle	CSSProperties	{}	Custom background styles such as fill.
iconFillColor	string	"white"	Fill color applied to icon paths that do not already specify one.
...svgProps	SVGProps<SVGSVGElement>	-	Standard SVG attributes such as className, aria-hidden, aria-label, or role.

Example:

import { XIcon } from "react-share";

<XIcon aria-hidden="true" size={32} round />;

Standalone icons are raw SVG elements. Mark decorative icons with aria-hidden="true", or provide an accessible name when the icon itself conveys meaning.

Troubleshooting

• Popup blockers: share buttons use window.open from the click handler. If your app does async work in beforeOnClick, some browsers may treat the eventual popup as script-triggered and block it. In those cases, set openShareDialogOnClick={false} and manage the resulting URL yourself.
• Accessibility: icon-only buttons should always have an accessible name. Use aria-label or aria-labelledby on the share button; htmlTitle is only a tooltip.
• Mobile app handoff: some platforms open the browser, an in-app browser, or an extra tab before handing off to a native app. This behavior is controlled by the target platform and browser, not by react-share.
• iOS PWAs: standalone mode can show a blank intermediary page for schemes such as mailto: or native-app handoff URLs. This is a platform limitation.

About semantic versioning

This library uses the standard semver convention. However, the share buttons and and counts are prone to lots of changes that are not in control of this library. For example: if Facebook decides to change or deprecate it's API in a major way, this library will not get a major version bump just because of that. Keep this in mind when you are planning the maintenance of your application.

License

MIT

Icons

Icon paths provided by: react-social-icons.