{"id":11855,"library":"react-share","title":"React Social Share Buttons","description":"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.","status":"active","version":"5.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/nygardk/react-share","tags":["javascript","react","component","react-component","social","media","social-media","share","button","typescript"],"install":[{"cmd":"npm install react-share","lang":"bash","label":"npm"},{"cmd":"yarn add react-share","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-share","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for a React component library.","package":"react","optional":false}],"imports":[{"note":"react-share is primarily ESM-first. While CommonJS is supported since v5.0.4, ESM imports are recommended for modern React applications.","wrong":"const FacebookShareButton = require('react-share').FacebookShareButton;","symbol":"FacebookShareButton","correct":"import { FacebookShareButton } from 'react-share';"},{"note":"All components and icons are named exports from the main 'react-share' package, not default exports from sub-paths.","wrong":"import XIcon from 'react-share/lib/XIcon';","symbol":"XIcon","correct":"import { XIcon } from 'react-share';"},{"note":"Use 'import type' for importing TypeScript types to ensure they are stripped during compilation and do not result in runtime overhead.","wrong":"import { ShareButtonProps } from 'react-share';","symbol":"ShareButtonProps","correct":"import type { ShareButtonProps } from 'react-share';"}],"quickstart":{"code":"import React from 'react';\nimport {\n  FacebookShareButton,\n  XShareButton,\n  LinkedinShareButton,\n  FacebookIcon,\n  XIcon,\n  LinkedinIcon,\n} from 'react-share';\n\nconst MyShareButtons = () => {\n  const shareUrl = 'https://checklist.day';\n  const title = 'Checklist Day - Your daily productivity companion';\n\n  return (\n    <div style={{ display: 'flex', gap: '10px' }}>\n      <FacebookShareButton url={shareUrl} quote={title} hashtag=\"#productivity\">\n        <FacebookIcon size={32} round />\n      </FacebookShareButton>\n\n      <XShareButton url={shareUrl} title={title}>\n        <XIcon size={32} round />\n      </XShareButton>\n\n      <LinkedinShareButton url={shareUrl} title={title}>\n        <LinkedinIcon size={32} round />\n      </LinkedinShareButton>\n\n      {/* Example with custom children and accessibility */}\n      <XShareButton url={shareUrl} title={title} aria-label=\"Share on X (formerly Twitter)\">\n        <span style={{ fontSize: '14px', padding: '8px', border: '1px solid #ddd', borderRadius: '5px' }}>\n          Share on X\n        </span>\n      </XShareButton>\n    </div>\n  );\n};\n\nexport default MyShareButtons;","lang":"typescript","description":"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`."},"warnings":[{"fix":"Remove all usage of share count exports (e.g., `getFacebookShareCount`). The library will no longer provide this functionality reliably.","message":"All 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.","severity":"breaking","affected_versions":">=5.3.0"},{"fix":"Discontinue using `hashtags`, `related`, and `via` props with `ThreadsShareButton` as they have no effect and will be removed.","message":"The `hashtags`, `related`, and `via` props for `ThreadsShareButton` are deprecated and are no-ops. They will be removed in v6.","severity":"deprecated","affected_versions":">=5.3.0"},{"fix":"Add an `aria-label` attribute (e.g., `aria-label=\"Share on Facebook\"`) to all icon-only share buttons to make them accessible.","message":"For 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Users 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.","severity":"gotcha","affected_versions":"<5.0.4"},{"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.","message":"React peer dependency requirements vary significantly between major versions of `react-share`.","severity":"breaking","affected_versions":"v5 (requires ^17 || ^18 || ^19), v4 (requires ^16.3 || ^17 || ^18), v3 (requires ^15 || ^16)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using named imports correctly: `import { FacebookShareButton } from 'react-share';` rather than `import FacebookShareButton from 'react-share';`.","cause":"This error typically occurs when attempting to use a default import for a named export, or incorrect destructuring of the library's exports.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'appendChild')"},{"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.","cause":"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.","error":"Uncaught ReferenceError: Buffer is not defined"},{"fix":"Update `react-share` to version `5.0.4` or higher. This specific patch release addressed `exports` configuration issues, improving CommonJS compatibility.","cause":"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.","error":"Cannot find module 'react-share/dist/index.cjs'"}],"ecosystem":"npm"}