react-share

library5.3.0jsnpmunverified

react-share is a robust and actively maintained React component library, currently at stable version 5.3.0, designed for integrating social media share buttons and formerly, share count functionalities into web applications. It releases minor and patch updates frequently to add new platforms, resolve issues, and manage deprecations. A primary advantage of react-share is its complete independence from external social media SDKs, ensuring better performance and enhanced user privacy by eliminating third-party script loading. The library fully leverages ES modules for effective tree shaking, enabling developers to minimize bundle sizes by importing only the necessary components. It provides a comprehensive suite of share buttons for numerous platforms, including Facebook, X (formerly Twitter), LinkedIn, WhatsApp, Email, and newer additions like Bluesky and Threads, all of which typically open a popup share window. The package includes its own set of social media icons but also offers flexibility for using custom icon sets. It maintains broad compatibility with React versions 17, 18, and 19. Development is active on GitHub, accompanied by a detailed API for customizing button behavior, appearance, and accessibility.

web-framework communication

npm install react-share

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SHARE

react-share

web-frameworkjavascriptv5.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FacebookShareButton

✓ import { FacebookShareButton } from 'react-share';

✗ const FacebookShareButton = require('react-share').FacebookShareButton;

react-share is primarily ESM-first. While CommonJS is supported since v5.0.4, ESM imports are recommended for modern React applications.

XIcon

✓ import { XIcon } from 'react-share';

✗ import XIcon from 'react-share/lib/XIcon';

All components and icons are named exports from the main 'react-share' package, not default exports from sub-paths.

ShareButtonProps

✓ import type { ShareButtonProps } from 'react-share';

✗ import { ShareButtonProps } from 'react-share';

Use 'import type' for importing TypeScript types to ensure they are stripped during compilation and do not result in runtime overhead.

This quickstart demonstrates how to integrate `react-share` buttons, including Facebook, X, and LinkedIn, along with their respective icons, into a React component. It also shows how to use custom children for buttons while ensuring accessibility with `aria-label`.

import React from 'react'; import { FacebookShareButton, XShareButton, LinkedinShareButton, FacebookIcon, XIcon, LinkedinIcon, } from 'react-share'; const MyShareButtons = () => { const shareUrl = 'https://checklist.day'; const title = 'Checklist Day - Your daily productivity companion'; return ( <div style={{ display: 'flex', gap: '10px' }}> <FacebookShareButton url={shareUrl} quote={title} hashtag="#productivity"> <FacebookIcon size={32} round /> </FacebookShareButton> <XShareButton url={shareUrl} title={title}> <XIcon size={32} round /> </XShareButton> <LinkedinShareButton url={shareUrl} title={title}> <LinkedinIcon size={32} round /> </LinkedinShareButton> {/* Example with custom children and accessibility */} <XShareButton url={shareUrl} title={title} aria-label="Share on X (formerly Twitter)"> <span style={{ fontSize: '14px', padding: '8px', border: '1px solid #ddd', borderRadius: '5px' }}> Share on X </span> </XShareButton> </div> ); }; export default MyShareButtons;

Debug

Known issues

breakingAll share count functionalities are officially deprecated in v5.3.0. These functions are no longer maintained nor guaranteed to work and will be completely removed in v6.

fix

Remove all usage of share count exports (e.g., `getFacebookShareCount`). The library will no longer provide this functionality reliably.

affects: >=5.3.0

deprecatedThe `hashtags`, `related`, and `via` props for `ThreadsShareButton` are deprecated and are no-ops. They will be removed in v6.

fix

Discontinue using `hashtags`, `related`, and `via` props with `ThreadsShareButton` as they have no effect and will be removed.

affects: >=5.3.0

gotchaFor icon-only share buttons, it is crucial to provide an `aria-label` or `aria-labelledby` prop to ensure accessibility for screen reader users. The `htmlTitle` prop only sets the native tooltip and is not used for accessibility names.

fix

Add an `aria-label` attribute (e.g., `aria-label="Share on Facebook"`) to all icon-only share buttons to make them accessible.

affects: >=1.0.0

gotchaUsers in CommonJS environments (especially Node.js v16+) might have experienced module resolution issues (`ERR_PACKAGE_PATH_NOT_EXPORTED`) with older versions of `react-share` due to incorrect `exports` configuration.

fix

Upgrade to `react-share@5.0.4` or newer. This version includes specific fixes to the `package.json` `exports` field to ensure better compatibility with both ESM and CJS environments.

affects: <5.0.4

breakingReact peer dependency requirements vary significantly between major versions of `react-share`.

fix

Ensure that your project's installed React version (`react` and `react-dom`) satisfies the peer dependency range specified by your `react-share` version to prevent installation warnings or runtime issues.

affects: v5 (requires ^17 || ^18 || ^19), v4 (requires ^16.3 || ^17 || ^18), v3 (requires ^15 || ^16)

Errors

Common errors & fixes

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This error typically occurs when attempting to use a default import for a named export, or incorrect destructuring of the library's exports.

fix

Ensure you are using named imports correctly: `import { FacebookShareButton } from 'react-share';` rather than `import FacebookShareButton from 'react-share';`.

TypeError: Cannot read properties of undefined (reading 'appendChild')

This issue might arise if attempting to use certain share buttons (like `EmailShareButton`) in a server-side rendering (SSR) environment without proper client-side only rendering guards, or in very old browser environments.

fix

For SSR applications, ensure `react-share` components that interact with the `window` object are rendered only on the client-side. For `EmailShareButton`, verify it's not being used in a context that expects a popup window behavior.

Uncaught ReferenceError: Buffer is not defined

This error can occur in browser environments, particularly with older bundler configurations (e.g., Webpack 4 or earlier), if `react-share` or its dependencies rely on Node.js-specific globals that are not automatically polyfilled.

fix

Upgrade to the latest `react-share` version (v5.x), as it includes build tooling updates to mitigate such issues. If using Webpack 5, you may need to manually add Node.js polyfills if your setup explicitly disables them.

Cannot find module 'react-share/dist/index.cjs'

This module resolution error indicates that your bundler or Node.js runtime (especially Node.js v16+) is failing to resolve the CommonJS entry point of the package, likely due to an incorrect `package.json` `exports` map.

fix

Update `react-share` to version `5.0.4` or higher. This specific patch release addressed `exports` configuration issues, improving CommonJS compatibility.

Upgrade

Version history

5.3.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for a React component library.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/nygardk/react-share ↗

packagehttps://www.npmjs.com/package/react-share ↗