react-share

In v2, individual share count components are exported directly from the react-share package. You no longer need to import a ShareCounts object and destructure it.

// v2 usage
import {
  FacebookShareCount,
  GooglePlusShareCount,
} from 'react-share';

To view the demo locally, clone the repository and execute the following commands:

1. Install dependencies: npm install
2. Run the demo: npm run demo

npm install && npm run demo

To use social media share buttons and share counts in your React application, install the react-share package using npm.

npm install react-share

In v2, individual share button components are exported directly from the react-share package. You no longer need to import a ShareButtons object and destructure it.

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

Share buttons use window.open within the click handler. If you perform asynchronous work inside the beforeOnClick prop, browsers may block the resulting popup because it is no longer considered a direct user-triggered action.

To resolve this, set openShareDialogOnClick={false} and manually manage the resulting URL.

Be aware of platform-specific behaviors that react-share cannot control:

• Mobile App Handoff: Some platforms may open a browser, an in-app browser, or an extra tab before handing off to a native app. This is determined by the target platform and browser.
• iOS PWAs: In standalone mode, iOS PWAs may show a blank intermediary page when using schemes like mailto: or when performing native-app handoff URLs. This is a platform limitation.

Share count components are deprecated and will be removed in v6. They are provided in v5 for best-effort compatibility only. Upstream networks may stop returning counts without notice.

Supported Components:

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

Props:

• url (string, required): URL to look up.
• children ((shareCount: number) => ReactNode, optional): A render prop for custom output.
• Supports standard <span> attributes like className and aria-*.

// Basic usage
<FacebookShareCount url={shareUrl} />

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

All exported icons are raw SVG elements and share the following props:

Note: Mark decorative icons with aria-hidden="true" or provide an accessible name if the icon conveys meaning.

import { XIcon } from "react-share";

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