react-share

Social media share buttons for your React apps.

Contents

• Features
• Installation
• Quick start
• Supported networks
• Share buttons
• Native sharing
• Mobile app handoff
• Icons
• Building share URLs yourself
• Accessibility
• Troubleshooting
• Compatibility and versioning
• Development
• License

Features

• No external script loading, i.e. no dependencies on network SDKs.
• Tree-shakeable ES modules: import only the buttons and icons you use.
• Share buttons for 22 networks.
• Opens a popup share window instead of navigating away.
• A native share button and helpers for the browser Web Share API.
• Opt-in mobile app handoff for selected messaging networks.
• Bundled network icons in two styles, or bring your own icons.
• Marked with "use client", so it works from React Server Components.

Installation

npm install react-share

react-share 6 supports React 18 and 19. See Compatibility and versioning for older versions.

Upgrading from v5? Follow the v5 to v6 migration guide.

Quick start

Each network has a share button and a matching icon. Put the icon (or any other content) inside the button, and give icon-only buttons an aria-label:

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

const shareUrl = "https://example.com/article";

export function ShareBar() {
  return (
    <div>
      <FacebookShareButton url={shareUrl} aria-label="Share this page on Facebook">
        <FacebookIcon size={32} />
      </FacebookShareButton>

      <XShareButton url={shareUrl} text="Read this next" aria-label="Share on X">
        <XIcon size={32} />
      </XShareButton>
    </div>
  );
}

Clicking a button opens the network's share page in a popup window.

See every button in action in the deployed demo (source in ./demo).

Supported networks

Required props are in bold. Every icon also has a badge-style *LegacyIcon variant (see Icons), and every network button has a matching build*ShareUrl helper (see Building share URLs yourself).

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. Pass any element as children to use your own icon set instead of the bundled icons.

Common props

These props apply to every network share button. NativeShareButton has its own props.

Required

Optional, all share buttons

Optional, popup-based buttons (all except EmailShareButton)

Native tooltip vs. shared text

The native button title attribute uses htmlTitle so it does not conflict with share payload props such as text, message, shareTitle, or postTitle:

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

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

Network-specific props

Each button accepts the common props plus the props below.

BlueskyShareButton

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

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

EmailShareButton

• 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} />
</EmailShareButton>;

FacebookShareButton

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

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

FacebookMessengerShareButton

• Mobile behavior depends on Meta's current app and dialog support and is less reliable than WhatsApp or Telegram app handoff.

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

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

FarcasterShareButton

• The shared url is attached to the cast as an embed.
• Opens the Farcaster compose intent (formerly Warpcast).

import { FarcasterShareButton, FarcasterIcon } from "react-share";

<FarcasterShareButton text="Read this next" url={shareUrl} aria-label="Share on Farcaster">
  <FarcasterIcon size={32} />
</FarcasterShareButton>;

GabShareButton

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

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

HatenaShareButton

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

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

InstapaperShareButton

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

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

LineShareButton

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

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

LinkedinShareButton

No network-specific props.

• LinkedIn sharing is URL-first and best-effort.
• The button only sends the shared URL because LinkedIn no longer provides a reliable public URL-based way to prefill title, summary, or source values.

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

<LinkedinShareButton url={shareUrl} aria-label="Share on LinkedIn">
  <LinkedinIcon size={32} />
</LinkedinShareButton>;

LivejournalShareButton

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

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

MailruShareButton

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

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

OKShareButton

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

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

PinterestShareButton

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

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

RedditShareButton

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

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

TelegramShareButton

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

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

ThreadsShareButton

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

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

TumblrShareButton

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

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

ViberShareButton

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

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

VKShareButton

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

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

WeiboShareButton

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

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

WhatsappShareButton

• Generates an api.whatsapp.com share URL.

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

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

XShareButton

• X can ignore or rewrite some share fields.

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

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

Native sharing

For mobile-first or PWA-first flows, react-share supports the browser Web Share API, which opens the device's own share sheet.

NativeShareButton

All props are optional. NativeShareButton also accepts beforeOnClick, disabled, disabledStyle, htmlTitle, and resetButtonStyle from the common props.

• Uses navigator.share() and disables itself when native sharing is unavailable.
• For file sharing, capability checks rely on navigator.canShare().

import { NativeShareButton, NativeShareIcon } from "react-share";

<NativeShareButton
  title="Read this next"
  text="Thought you might like this"
  url={shareUrl}
  aria-label="Share with your device"
>
  <NativeShareIcon size={32} />
</NativeShareButton>;

Helpers

To build your own UI around the Web Share API, use canNativeShare(data) to check support and shareNative(data) to open the share sheet.

See Native and mobile sharing behavior for how native sharing, popups, and app handoff fit together.

Mobile app handoff

FacebookMessengerShareButton, TelegramShareButton, ViberShareButton, and WhatsappShareButton accept a mobileBehavior prop:

<WhatsappShareButton url={shareUrl} mobileBehavior="auto" aria-label="Share on WhatsApp">
  <WhatsappIcon size={32} />
</WhatsappShareButton>

"app" and "auto" are best-effort only. The library does not try to detect whether an app-open succeeded or guarantee a browser fallback path. 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.

Icons

v6 exports two icon families:

• *Icon: network logos without customizable backgrounds. Glyph-only marks such as X, Weibo, and Tumblr sit on a circle so every icon has a similar visual weight, and logo details stay white so the icons work on dark backgrounds.
• *LegacyIcon: the v5 badge-style icons with customizable backgrounds.

Icons are standalone SVG components, so you can use them outside share buttons too. To use your own icon set instead, pass any element as the share button's children.

Icon props

import { XIcon } from "react-share";

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

Most icons render with their default brand color. Pass color to recolor the brand-colored part of any icon; white logo details stay white.

Legacy icon props

Legacy icons preserve the old badge look and prop contract:

import { XLegacyIcon } from "react-share";

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

Building share URLs yourself

Low-level helpers let you generate a share URL or open a popup without the button components. Every network button has a matching build*ShareUrl export, such as buildFacebookShareUrl, buildLinkedinShareUrl, buildWhatsappShareUrl, and buildXShareUrl. openShareWindow exposes the same popup behavior used internally by the button components:

import { buildXShareUrl, openShareWindow } from "react-share";

const url = buildXShareUrl(shareUrl, {
  text: "Read this next",
  hashtags: ["react", "share"],
});

openShareWindow(url, { width: 550, height: 400 });

// or open a regular browser tab instead of a popup window
openShareWindow(url, { newTab: true });

Custom networks

For a network the library does not cover, build its share URL yourself and open it with openShareWindow:

import { openShareWindow } from "react-share";

<button
  type="button"
  onClick={() => openShareWindow(`https://example.com/share?u=${encodeURIComponent(shareUrl)}`)}
>
  Share on Example
</button>;

Preparing the share data on click

Share buttons build their link from props at click time. If you need to fetch something first, such as a short link or a token, open the popup immediately so popup blockers allow it, then load the URL once it is ready:

import { buildXShareUrl, openShareWindow } from "react-share";

async function share() {
  const popup = openShareWindow("about:blank");

  try {
    const shortUrl = await createShortLink(shareUrl);

    popup?.location.replace(buildXShareUrl(shortUrl, { text: "Read this next" }));
  } catch {
    popup?.close();
  }
}

Accessibility

• Icon-only buttons need an accessible name. Pass aria-label or aria-labelledby on the share button.
• htmlTitle only sets the native tooltip/title attribute and is not used as the button's accessible name.
• 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

• Popups are blocked. Share buttons call window.open synchronously from the click handler, even when beforeOnClick is async, so browsers treat the popup as user-initiated. If a blocker still prevents it, onShareWindowOpen receives null so you can fall back to another flow.
• NativeShareButton fails after async work. It cannot pre-open the system share sheet, so long async work in its beforeOnClick may cause the browser to reject navigator.share().
• Mobile app handoff opens a browser tab first. This is controlled by the target platform and browser. See Mobile app handoff.
• React Server Components. The package is marked with "use client", so share buttons and icons can be imported directly from Server Components in frameworks such as Next.js. They render as client components.
• iOS PWAs show a blank page. Standalone mode can show a blank intermediary page for schemes such as mailto: or native-app handoff URLs. This is a platform limitation.

Compatibility and versioning

React compatibility

Semantic versioning

This library uses the standard semver convention. However, the share buttons are prone to lots of changes that are not in control of this library. For example: if Facebook decides to change or deprecate its 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.

Migration guides

• v5 to v6
• v1 to v2

Development

npm install
npm run demo            # run the demo locally
npm test                # run the test suite
npm run update-example  # regenerate example.svg from the demo

License

MIT