Merge pull request #149 from hiranya25/feature/add-discord-support

feat: add discord support

Author: kpj2006

README.md

@@ -71,7 +71,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
 
 ## Features
 
-- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest
+- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest, Discord
 - 🎯 Zero dependencies - pure vanilla JavaScript
 - ⚛️ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, or plain HTML
 - 🔄 Auto-detects current URL and page title
@@ -528,7 +528,7 @@ new SocialShareButton({
 | `onCopy`           | function       | `null`                 | Callback when user copies link: `(url) => {}`      |
 
 **Available Platforms:**  
-`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest`
+`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest`, `discord`
 
 ### Customize Share Message/Post Text
 
@@ -555,7 +555,8 @@ new SocialShareButton({
 - **Reddit:** `title` - `description` (used as title)
 - **Email:** Subject = `title`, Body = `description` + link
 - **Pinterest:** `title` + `description` + `hashtags` + link
-
+- **Discord:** `title` + `description` + `hashtags` + link
+- 
 ### Customize Button Color & Appearance
 
 **Option 1: Use Pre-built Styles** (Easiest)

index.html

@@ -680,7 +680,7 @@ <h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
           container: "#demo-social",
           url: demoUrl,
           title: demoTitle,
-          platforms: ["facebook", "twitter", "reddit", "pinterest"],
+          platforms: ["facebook", "twitter", "reddit", "pinterest", "discord"],
           buttonText: "Share",
         });
 
@@ -689,7 +689,7 @@ <h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
           container: "#demo-messaging",
           url: demoUrl,
           title: demoTitle,
-          platforms: ["whatsapp", "telegram"],
+          platforms: ["whatsapp", "telegram", "discord"],
           buttonText: "Share",
         });
 

src/social-share-button-preact.jsx

@@ -1,21 +1,21 @@
 import { useEffect, useRef } from "preact/hooks";
 
- /**
- * SocialShareButton Preact Wrapper
- *
- * Provides a lightweight Preact functional component that wraps the core
- * SocialShareButton vanilla JS library. Handles lifecycle, dynamic updates,
- * and browser-only initialization.
- *
- */
+/**
+* SocialShareButton Preact Wrapper
+*
+* Provides a lightweight Preact functional component that wraps the core
+* SocialShareButton vanilla JS library. Handles lifecycle, dynamic updates,
+* and browser-only initialization.
+*
+*/
 
 export default function SocialShareButton({
   url = "",
   title = "",
   description = "",
   hashtags = [],
   via = "",
-  platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit"],
+  platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "discord"],
   theme = "dark",
   buttonText = "Share",
   customClass = "",
@@ -26,7 +26,7 @@ export default function SocialShareButton({
   onCopy = null,
   buttonStyle = "default",
   modalPosition = "center",
-  
+
   // Analytics props — the library emits events but never collects data itself.
   analytics = true,
   onAnalytics = null, // (payload) => void hook
@@ -36,10 +36,10 @@ export default function SocialShareButton({
 }) {
   // DOM reference to the container where the button will be injected
   const containerRef = useRef(null);
-  
+
   // Reference to the vanilla JS class instance
   const shareButtonRef = useRef(null);
-  
+
   // Storage for the latest options to avoid stale closures during async initialization
   const latestOptionsRef = useRef(null);
 
@@ -97,7 +97,7 @@ export default function SocialShareButton({
     };
 
     // SSR Check: Ensure we're in a browser environment
-    if (typeof window === "undefined") return () => {};
+    if (typeof window === "undefined") return () => { };
 
     if (window.SocialShareButton) {
       // Core library is already loaded
@@ -135,7 +135,7 @@ export default function SocialShareButton({
    * Synchronizes prop changes from Preact down to the vanilla JS instance 
    * without re-mounting the entire component.
    */
-  
+
   // Stringify array dependencies to prevent unnecessary re-runs when 
   // parent components pass fresh array literals on every render.
   const hashtagsDep = JSON.stringify(hashtags);

src/social-share-button-qwik.tsx

@@ -19,7 +19,7 @@ interface Props {
 export const SocialShareButton = component$<Props>((props) => {
   const containerRef = useSignal<HTMLDivElement>();
 
-  
+
   useVisibleTask$(({ cleanup }) => {
     if (typeof window !== 'undefined' && (window as any).SocialShareButton && containerRef.value) {
       const shareButton = new (window as any).SocialShareButton({
@@ -29,7 +29,7 @@ export const SocialShareButton = component$<Props>((props) => {
         description: props.description || '',
         hashtags: props.hashtags || [],
         via: props.via || '',
-        platforms: props.platforms || ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit'],
+        platforms: props.platforms || ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit', 'discord'],
         theme: props.theme || 'dark',
         buttonText: props.buttonText || 'Share',
         customClass: props.customClass || '',

src/social-share-button-react.jsx

@@ -13,15 +13,15 @@ export const SocialShareButton = ({
   description = "",
   hashtags = [],
   via = "",
-  platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "pinterest"],
+  platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "pinterest", "discord"],
   theme = "dark",
   buttonText = "Share",
   customClass = "",
   onShare = null,
   onCopy = null,
   buttonStyle = "default",
   modalPosition = "center",
-  
+
   // Analytics: library emits events but never collects data
   analytics = true,
   onAnalytics = null, // Event callback
@@ -31,7 +31,7 @@ export const SocialShareButton = ({
 }) => {
   // DOM reference for the injection target
   const containerRef = useRef(null);
-  
+
   // Reference to the vanilla JS class instance
   const shareButtonRef = useRef(null);
 
@@ -46,47 +46,47 @@ export const SocialShareButton = ({
    * Includes a safe check for the global SocialShareButton class.
    */
   useEffect(() => {
-      if (containerRef.current && !shareButtonRef.current) {
-        if (typeof window !== "undefined" && window.SocialShareButton) {
-          shareButtonRef.current = new window.SocialShareButton({
-            container: containerRef.current,
-            url: currentUrl,
-            title: currentTitle,
-            description,
-            hashtags,
-            via,
-            platforms,
-            theme,
-            buttonText,
-            customClass,
-            onShare,
-            onCopy,
-            buttonStyle,
-            modalPosition,
-            analytics,
-            onAnalytics,
-            analyticsPlugins,
-            componentId,
-            debug,
-          });
-        }
+    if (containerRef.current && !shareButtonRef.current) {
+      if (typeof window !== "undefined" && window.SocialShareButton) {
+        shareButtonRef.current = new window.SocialShareButton({
+          container: containerRef.current,
+          url: currentUrl,
+          title: currentTitle,
+          description,
+          hashtags,
+          via,
+          platforms,
+          theme,
+          buttonText,
+          customClass,
+          onShare,
+          onCopy,
+          buttonStyle,
+          modalPosition,
+          analytics,
+          onAnalytics,
+          analyticsPlugins,
+          componentId,
+          debug,
+        });
       }
+    }
 
-      return () => {
-        if (shareButtonRef.current) {
-          shareButtonRef.current.destroy();
-          shareButtonRef.current = null;
-        }
-      };
-    }, []);
+    return () => {
+      if (shareButtonRef.current) {
+        shareButtonRef.current.destroy();
+        shareButtonRef.current = null;
+      }
+    };
+  }, []);
 
   /**
    * Update Effect
    * 
    * Synchronizes React prop changes with the underlying vanilla JS instance 
    * without re-mounting the entire component.
    */
-  
+
   useEffect(() => {
     if (shareButtonRef.current) {
       // Use the library's built-in update method

src/social-share-button.js

@@ -23,6 +23,7 @@ class SocialShareButton {
         "telegram",
         "reddit",
         "pinterest",
+        "discord",
       ],
       theme: options.theme || "dark",
       buttonText: options.buttonText || "Share",
@@ -172,6 +173,11 @@ class SocialShareButton {
         color: "#E60023",
         icon: '<path d="M12 0C5.372 0 0 5.373 0 12c0 4.99 3.052 9.267 7.386 11.059-.102-.94-.194-2.385.04-3.413.211-.904 1.356-5.752 1.356-5.752s-.346-.693-.346-1.717c0-1.608.932-2.808 2.093-2.808.987 0 1.463.741 1.463 1.63 0 .993-.632 2.476-.958 3.853-.273 1.155.58 2.098 1.718 2.098 2.062 0 3.646-2.174 3.646-5.31 0-2.778-1.997-4.722-4.847-4.722-3.304 0-5.242 2.478-5.242 5.039 0 .997.384 2.066.865 2.647.095.115.109.215.08.331-.088.365-.282 1.155-.321 1.316-.05.212-.165.257-.381.155-1.418-.66-2.305-2.733-2.305-4.397 0-3.579 2.601-6.867 7.497-6.867 3.936 0 6.998 2.805 6.998 6.557 0 3.91-2.466 7.058-5.892 7.058-1.15 0-2.232-.597-2.6-1.302l-.707 2.692c-.255.983-.946 2.215-1.408 2.966A12.002 12.002 0 0024 12C24 5.373 18.627 0 12 0z"/>',
       },
+      discord: {
+        name: "Discord",
+        color: "#5865F2",
+        icon: '<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 11.756 11.756 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.419-2.157 2.419z"/>',
+      },
     };
 
     return this.options.platforms
@@ -244,6 +250,7 @@ class SocialShareButton {
       reddit: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedReddit}`,
       email: `mailto:?subject=${encodedTitle}&body=${encodedEmail}%20${encodedUrl}`,
       pinterest: `https://pinterest.com/pin/create/button/?url=${encodedUrl}&description=${encodedPinterest}`,
+      discord: "https://discord.com/channels/@me",
     };
 
     return urls[platform] || "";
@@ -409,9 +416,17 @@ class SocialShareButton {
     if (shareUrl) {
       this._emit("social_share_click", "share", { platform });
 
-      if (platform === "email") {
+      // Platform-specific sharing trigger logic:
+      // Discord does not provide a native web-share intent; therefore, the most reliable
+      // fallback is to copy the share URL to the clipboard and then navigate the user 
+      // towards Discord's direct messaging area.
+      if (platform === "discord") {
+        this.copyLink();
+        window.open(shareUrl, "_blank", "noopener,noreferrer");
+      } else if (platform === "email") {
         window.location.href = shareUrl;
       } else {
+        // Default behavior: open platform's share intent in a specialized popup window
         window.open(shareUrl, "_blank", "noopener,noreferrer,width=600,height=600");
       }