React Social Share Buttons

Common errors

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

  cause 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')

  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.
  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

  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.
  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'

  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.
  fix Update `react-share` to version `5.0.4` or higher. This specific patch release addressed `exports` configuration issues, improving CommonJS compatibility.

Warnings

• breaking 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.
  Fix: Remove all usage of share count exports (e.g., `getFacebookShareCount`). The library will no longer provide this functionality reliably.
• deprecated The `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.
• gotcha 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.
  Fix: Add an `aria-label` attribute (e.g., `aria-label="Share on Facebook"`) to all icon-only share buttons to make them accessible.
• gotcha 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.
  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.
• breaking React 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.

Install

• npm install react-share npm
• yarn add react-share yarn
• pnpm add react-share pnpm

Imports

• FacebookShareButton
  wrong:

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

  correct:

  import { FacebookShareButton } from 'react-share';

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

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

  correct:

  import { XIcon } from 'react-share';

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

  import { ShareButtonProps } from 'react-share';

  correct:

  import type { 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.

Quickstart

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;