{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-share"],"cli":null},"imports":["import { FacebookShareButton } from 'react-share';","import { XIcon } from 'react-share';","import type { ShareButtonProps } from 'react-share';"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}