@prithvijit/sharebutton-react

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. No <script>/<link> CDN tags globals, no useEffect/useRef plumbing in your own components. The package bundles the core library and its CSS internally and injects the stylesheet once on first mount.

Why this exists

The upstream library ships as a vanilla-JS class that you attach to the window object via a CDN <script> tag, then wire up yourself with useEffect/useRef in every component that needs a share button. That's a lot of boilerplate to repeat per app. This package does that wiring once, internally, and exposes a plain declarative component instead.

Props

Prop	Type	Default	Notes
url	string	current page URL
title	string	document.title
description	string	""
hashtags	string[]	[]
via	string	""	Twitter/X handle, without @
platforms	SharePlatform[]	all supported platforms	whatsapp | facebook | twitter | linkedin | telegram | reddit | email | pinterest | discord
theme	"dark" | "light"	"dark"
buttonText	string	"Share"
buttonStyle	ButtonStyle	"default"	default | primary | compact | icon-only
buttonColor	string	""
buttonHoverColor	string	""
className	string	""	Extra class on the trigger button
modalPosition	string	"center"
onShare	(platform: string, url: string) => void	-
onCopy	(url: string) => void	-

All props are reactive — changing any of them re-syncs the live share button instance without unmounting it.

Updating on route change (SPA)

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

Just pass the current URL/title as props from your router; the component re-syncs automatically whenever they change. No manual updateOptions() calls needed.

Building from Source

If you want to clone this repository and build the library locally:

npm install
npm run build