Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});

Expand All @@ -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",
});

Expand Down
28 changes: 14 additions & 14 deletions src/social-share-button-preact.jsx
Original file line number Diff line number Diff line change
@@ -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 = "",
Expand All @@ -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
Expand All @@ -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);

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/social-share-button-qwik.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 || '',
Expand Down
70 changes: 35 additions & 35 deletions src/social-share-button-react.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);

Expand All @@ -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
Expand Down
17 changes: 16 additions & 1 deletion src/social-share-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ class SocialShareButton {
"telegram",
"reddit",
"pinterest",
"discord",
],
theme: options.theme || "dark",
buttonText: options.buttonText || "Share",
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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] || "";
Expand Down Expand Up @@ -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");
}

Expand Down
Loading