@prithvijit/sharebutton-react

A drop-in React component for social sharing — no CDN scripts, no manual wiring, no boilerplate.

npm install @prithvijit/sharebutton-react

import { SocialShare } from "@prithvijit/sharebutton-react";

function ArticlePage({ url }: { url: string }) {
  return <SocialShare url={url} platforms={["whatsapp", "facebook"]} />;
}

That's it. The package is completely self-contained — no external <script> or <link> tags needed.

---

Features

• 9 platforms — WhatsApp, Facebook, X (Twitter), LinkedIn, Telegram, Reddit, Email, Pinterest, Discord
• Native Web Share API — On mobile browsers that support it, the OS-native share sheet opens automatically (falls back to the modal on desktop)
• Copy to clipboard — Built-in "Copy link" button at the bottom of the share modal
• Animated modal — Smooth fade + scale open/close transitions
• Fully accessible — role="dialog", aria-modal, focus trapping, Escape-to-close, aria-label on all interactive elements
• Backdrop click to close — Click outside the modal to dismiss it
• Dark & light themes — Matches your app's color scheme
• 4 button style presets — default, primary, compact, icon-only
• Custom trigger — Pass a render prop via children to use your own trigger element
• Ref forwarding — forwardRef supported on the trigger button
• Event callbacks — onShare and onCopy for analytics / tracking
• Zero runtime dependencies — Only React as a peer dependency
• Tree-shakeable — sideEffects: false in package.json
• Dual format — Ships ESM and CJS bundles with full TypeScript declarations

---

Props

Prop	Type	Default	Description
url	string	current page URL	The URL to share
title	string	document.title	Title / headline for the share
description	string	""	Optional description text
hashtags	string[]	[]	Hashtags to include (Twitter, etc.)
via	string	""	Twitter/X handle, without @
platforms	SharePlatform[]	all 9 platforms	Which platforms to show
theme	"dark" | "light"	"dark"	Color theme for the modal
buttonText	string	"Share"	Text shown on the trigger button
buttonStyle	ButtonStylePreset	"default"	default | primary | compact | icon-only
buttonColor	string	""	Custom background color for the trigger
buttonHoverColor	string	""	Custom hover background color
className	string	""	Extra CSS class on the trigger button
modalPosition	"center" | "top" | "bottom"	"center"	Where the modal appears on screen
onShare	(platform: string, url: string) => void	—	Called when a share link is clicked
onCopy	(url: string) => void	—	Called when the URL is copied
children	(props: { open }) => ReactNode	—	Render prop for a custom trigger element

All props are reactive — changing any of them updates the component without unmounting it.

Type exports

import type { SocialShareProps, SharePlatform, ButtonStylePreset } from "@prithvijit/sharebutton-react";

---

Examples

Basic usage

<SocialShare url="https://example.com" />

Pick specific platforms

<SocialShare
  url="https://example.com"
  platforms={["twitter", "linkedin", "whatsapp"]}
/>

Light theme with primary button style

<SocialShare
  url="https://example.com"
  theme="light"
  buttonStyle="primary"
  buttonText="Share this article"
/>

Icon-only button

<SocialShare url="https://example.com" buttonStyle="icon-only" />

Custom button colors

<SocialShare
  url="https://example.com"
  buttonColor="#6366f1"
  buttonHoverColor="#4f46e5"
  buttonText="Share"
/>

Modal position

{/* Anchored to the top of the viewport */}
<SocialShare url="https://example.com" modalPosition="top" />

{/* Anchored to the bottom */}
<SocialShare url="https://example.com" modalPosition="bottom" />

Custom trigger element (render prop)

<SocialShare url="https://example.com">
  {({ open }) => (
    <button onClick={open} className="my-custom-button">
      🔗 Share this page
    </button>
  )}
</SocialShare>

Twitter with hashtags and attribution

<SocialShare
  url="https://example.com"
  title="Check out this project!"
  hashtags={["react", "opensource"]}
  via="prithvijit"
  platforms={["twitter"]}
/>

Analytics / tracking

<SocialShare
  url="https://example.com"
  onShare={(platform, url) => {
    analytics.track("social_share", { platform, url });
  }}
  onCopy={(url) => {
    analytics.track("link_copied", { url });
  }}
/>

Ref forwarding

const buttonRef = useRef<HTMLButtonElement>(null);

<SocialShare ref={buttonRef} url="https://example.com" />;

SPA route changes

<SocialShare url={window.location.href} title={document.title} />

Just pass the current URL / title from your router — the component re-syncs automatically whenever they change.

---

Web Share API

On mobile browsers that support the Web Share API, clicking the trigger button will open the native OS share sheet instead of the custom modal. This provides a better experience on mobile devices. If the API is unavailable or the user cancels, the custom modal is shown as a fallback.

---

Building from Source

git clone https://github.com/PrithvijitBose/social-share-button.git
cd social-share-button
npm install
npm run build

The output is written to dist/.

---

License

MIT