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