Share Bar

When to use

A horizontal cluster of social-share buttons + a copy-link button, typically at the bottom of an article (or pinned to the side as a share rail). Each social button opens the platform's share intent in a new window with the page's URL prefilled; the copy button writes the URL to the clipboard with a 2-second visual + audible success affordance.

Basic example

import { ShareBar } from "@/components/share-bar"

export function ArticleFooter() {
  return (
    <ShareBar
      url="https://example.com/news/sustainable-cities"
      title="Sustainable cities, then and now"
      headingAs="h4"
      divider
      targets={[
        { kind: "twitter" },
        { kind: "facebook" },
        { kind: "linkedin" },
        { kind: "copy" },
      ]}
    />
  )
}

Built-in platforms

Twitter / Facebook / LinkedIn / Reddit / WhatsApp / Telegram / Email / Threads / Bluesky — each ships with a share-intent URL template + a default Lucide icon + a default English aria-label. Override the icon or aria-label per target if you want a different look or different text.

Custom targets

import { Send } from "lucide-react"

<ShareBar
  url={article.canonicalUrl}
  targets={[
    { kind: "twitter" },
    { kind: "linkedin" },
    {
      kind: "custom",
      id: "send-to-teammate",
      icon: Send,
      ariaLabel: "Send to teammate",
      onClick: () => openInternalShareDialog(article.id),
    },
    { kind: "copy" },
  ]}
/>

Analytics hook

<ShareBar
  targets={[{ kind: "twitter" }, { kind: "facebook" }, { kind: "copy" }]}
  onShare={(target) => analytics.track("article.share", { id: article.id, target })}
/>

onShare(targetKind) fires after a successful share-intent open or successful copy. For granular hooks use onCopySuccess / onCopyError.

URL resolution

• If urlis provided, that's what gets shared.
• Otherwise, window.location.href is read at click time on the client — never during render. SSR-safe.
• Pass title / text / via / hashtags for templates that accept them (Twitter, Email, WhatsApp, etc.).

Copy fallback

Copy uses navigator.clipboard.writeTextfirst; if that isn't available (older browsers, insecure HTTP context, embedded webviews), it falls back to the deprecated document.execCommand("copy") on a hidden textarea. Both paths are inside a try/catch so the error state surfaces to onCopyError + the icon flip.

Notes

• External links open in a new window with noopener,noreferrer for safety.
• Copy success/error feedback is dual-channel: visible icon flip + aria-live announcement (polite for success, alert for errors).
• The 2-second success-reset timeout is cleared on unmount — no setState after unmount warning.
• Threads + Bluesky icons fall back to Share2 from lucide-react until first-party icons land. Override via target.icon if you ship custom SVGs.
• The component is exported as React.memo. Memoize the targets array (or use a module-level constant) for the memo to bite — inline arrays defeat it.
• Don't reach for this if you need share-count metrics — pure action surface, no API calls.