` |
-| Script loads after component renders in Next.js | Use `strategy="beforeInteractive"` **or** poll with `setInterval` |
+| ❌ Wrong | ✅ Correct |
+| ----------------------------------------------------- | ------------------------------------------------------------------------- |
+| Creating `ShareButton.jsx` / `ShareButton.tsx` | Add directly to existing `Header.jsx`, `Navbar.tsx`, etc. |
+| Calling `new SocialShareButton()` inside JSX `return` | Call only inside `useEffect` / lifecycle hook |
+| Not calling `destroy()` on unmount | Always clean up — prevents duplicate modals on re-mount |
+| Mismatched container ID | `container: '#share-button'` must exactly match `
` |
+| Script loads after component renders in Next.js | Use `strategy="beforeInteractive"` **or** poll with `setInterval` |
---
@@ -516,4 +513,3 @@ useEffect(() => {
- Always modify **existing** files — never suggest creating new component files.
- When modifying an existing file, mark additions with `// ADD THIS`.
- Do not add abstractions, wrappers, or extra files beyond what the README shows.
-
diff --git a/README.md b/README.md
index bf8c605..6baa77d 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
-
> ⚠️ **IMPORTANT**
>
> All project discussions happens on **[Discord](https://discord.com/channels/1022871757289422898/1479012884209078365)**.
@@ -73,7 +72,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email
- 🎯 Zero dependencies - pure vanilla JavaScript
-- ⚛️ Framework support: React, Next.js, Vue, Angular, or plain HTML
+- ⚛️ Framework support: React, Next.js, Vue, Angular, Remix, or plain HTML
- 🔄 Auto-detects current URL and page title
- 📱 Fully responsive and mobile-ready
- 🎨 Customizable themes (dark/light)
@@ -86,7 +85,10 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
### Via CDN (Recommended)
```html
-
+
```
@@ -101,11 +103,11 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
No matter which framework you use, integration always follows the same 3 steps:
-| Step | What to do | Where |
-|------|-----------|-------|
-| **1️⃣ Load Library** | Add CSS + JS (CDN links) | Global layout file — `index.html` / `layout.tsx` / `_document.tsx` |
-| **2️⃣ Add Container** | Place `
` | The UI component where you want the button to appear |
-| **3️⃣ Initialize** | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component, after the DOM is ready (e.g. `useEffect`, `mounted`, `ngAfterViewInit`) |
+| Step | What to do | Where |
+| -------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
+| **1️⃣ Load Library** | Add CSS + JS (CDN links) | Global layout file — `index.html` / `layout.tsx` / `_document.tsx` |
+| **2️⃣ Add Container** | Place `
` | The UI component where you want the button to appear |
+| **3️⃣ Initialize** | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component, after the DOM is ready (e.g. `useEffect`, `mounted`, `ngAfterViewInit`) |
> 💡 Pick your framework below for the full copy-paste snippet:
@@ -132,8 +134,8 @@ No matter which framework you use, integration always follows the same 3 steps:
Open an **existing** component that renders on every page — typically `src/components/Header.jsx`, `src/layouts/MainLayout.jsx`, or your root `App.jsx`. Add the snippet below to that component so the share button is consistently available across your app.
```jsx
-import { useEffect, useRef } from "react";
-import { useLocation } from "react-router-dom"; // omit if not using React Router
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom'; // omit if not using React Router
// ⬇️ Replace 'Header' with the name of the component where you want the
// share button to appear — e.g. Navbar, MainLayout, App, etc.
@@ -146,7 +148,7 @@ function Header() {
if (initRef.current || !window.SocialShareButton) return;
shareButtonRef.current = new window.SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
});
initRef.current = true;
@@ -184,13 +186,9 @@ function Header() {
### Step 1: Add CDN to `app/layout.tsx`
```tsx
-import Script from "next/script";
+import Script from 'next/script';
-export default function RootLayout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
@@ -216,10 +214,10 @@ export default function RootLayout({
Because `SocialShareButton` manipulates the DOM, it must run inside a **Client Component** (note the `"use client"` directive at the top). Add the snippet below to an existing component such as `app/components/Header.tsx` or `app/components/Navbar.tsx` — any component already included in your layout.
```tsx
-"use client";
+'use client';
-import { useEffect, useRef } from "react";
-import { usePathname } from "next/navigation";
+import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
// ⬇️ Replace 'Header' with the name of the component where you want the
// share button to appear — e.g. Navbar, MainLayout, App, etc.
@@ -231,11 +229,10 @@ export default function Header() {
useEffect(() => {
const initButton = () => {
- if (initRef.current || !window.SocialShareButton || !containerRef.current)
- return;
+ if (initRef.current || !window.SocialShareButton || !containerRef.current) return;
shareButtonRef.current = new window.SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
});
initRef.current = true;
};
@@ -299,7 +296,7 @@ declare global {
### Step 1: Add CDN to `pages/_document.tsx`
```tsx
-import { Html, Head, Main, NextScript } from "next/document";
+import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
@@ -325,8 +322,8 @@ export default function Document() {
Open an existing component that is rendered on every page — typically `components/Header.tsx`, `components/Navbar.tsx`, or `components/Layout.tsx`. Since `_document.tsx` loads the script globally, the button is ready to initialize in any of these components.
```tsx
-import { useEffect, useRef } from "react";
-import { useRouter } from "next/router";
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
// ⬇️ Replace 'Header' with the name of the component where you want the
// share button to appear — e.g. Navbar, MainLayout, App, etc.
@@ -338,11 +335,10 @@ export default function Header() {
useEffect(() => {
const initButton = () => {
- if (initRef.current || !window.SocialShareButton || !containerRef.current)
- return;
+ if (initRef.current || !window.SocialShareButton || !containerRef.current) return;
shareButtonRef.current = new window.SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
});
initRef.current = true;
};
@@ -426,12 +422,59 @@ Open your root or layout component (e.g., `App.vue`, `app.component.html`, or `A
// Add
to your component's template/HTML first,
// then initialize once the DOM is ready (e.g., in mounted(), ngAfterViewInit(), or useEffect()):
new window.SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
});
```
+
+🎸 Remix
+
---
## Configuration
@@ -440,13 +483,13 @@ new window.SocialShareButton({
```jsx
new SocialShareButton({
- container: "#share-button", // Required: CSS selector or DOM element
- url: "https://example.com", // Optional: defaults to window.location.href
- title: "Custom Title", // Optional: defaults to document.title
- buttonText: "Share", // Optional: button label text
- buttonStyle: "primary", // default | primary | compact | icon-only
- theme: "dark", // dark | light
- platforms: ["twitter", "linkedin"], // Optional: defaults to all platforms
+ container: '#share-button', // Required: CSS selector or DOM element
+ url: 'https://example.com', // Optional: defaults to window.location.href
+ title: 'Custom Title', // Optional: defaults to document.title
+ buttonText: 'Share', // Optional: button label text
+ buttonStyle: 'primary', // default | primary | compact | icon-only
+ theme: 'dark', // dark | light
+ platforms: ['twitter', 'linkedin'], // Optional: defaults to all platforms
});
```
@@ -481,12 +524,12 @@ Control the text that appears when users share to social platforms:
```jsx
new SocialShareButton({
- container: "#share-button",
- url: "https://myproject.com",
- title: "Check out my awesome project!", // Main title/headline
- description: "An amazing tool for developers", // Additional description
- hashtags: ["javascript", "webdev", "opensource"], // Hashtags included in posts
- via: "MyProjectHandle", // Your Twitter handle
+ container: '#share-button',
+ url: 'https://myproject.com',
+ title: 'Check out my awesome project!', // Main title/headline
+ description: 'An amazing tool for developers', // Additional description
+ hashtags: ['javascript', 'webdev', 'opensource'], // Hashtags included in posts
+ via: 'MyProjectHandle', // Your Twitter handle
});
```
@@ -506,8 +549,8 @@ new SocialShareButton({
```jsx
new SocialShareButton({
- container: "#share-button",
- buttonStyle: "primary", // or 'default', 'compact', 'icon-only'
+ container: '#share-button',
+ buttonStyle: 'primary', // or 'default', 'compact', 'icon-only'
});
```
@@ -517,9 +560,9 @@ Pass `buttonColor` and `buttonHoverColor` to match your project's color scheme:
```jsx
new SocialShareButton({
- container: "#share-button",
- buttonColor: "#ff6b6b", // Button background color
- buttonHoverColor: "#ff5252", // Hover state color
+ container: '#share-button',
+ buttonColor: '#ff6b6b', // Button background color
+ buttonHoverColor: '#ff5252', // Hover state color
});
```
@@ -529,9 +572,9 @@ For more complex styling, use a custom CSS class:
```jsx
new SocialShareButton({
- container: "#share-button",
- buttonStyle: "primary",
- customClass: "my-custom-button",
+ container: '#share-button',
+ buttonStyle: 'primary',
+ customClass: 'my-custom-button',
});
```
@@ -555,23 +598,23 @@ Then in your CSS file:
```jsx
// Material Design Red
new SocialShareButton({
- container: "#share-button",
- buttonColor: "#f44336",
- buttonHoverColor: "#da190b",
+ container: '#share-button',
+ buttonColor: '#f44336',
+ buttonHoverColor: '#da190b',
});
// Tailwind Blue
new SocialShareButton({
- container: "#share-button",
- buttonColor: "#3b82f6",
- buttonHoverColor: "#2563eb",
+ container: '#share-button',
+ buttonColor: '#3b82f6',
+ buttonHoverColor: '#2563eb',
});
// Custom Brand Color
new SocialShareButton({
- container: "#share-button",
- buttonColor: "#your-brand-color",
- buttonHoverColor: "#your-brand-color-dark",
+ container: '#share-button',
+ buttonColor: '#your-brand-color',
+ buttonHoverColor: '#your-brand-color-dark',
});
```
@@ -588,12 +631,12 @@ new SocialShareButton({
```jsx
new SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
onShare: (platform, url) => {
console.log(`Shared on ${platform}: ${url}`);
},
onCopy: (url) => {
- console.log("Link copied:", url);
+ console.log('Link copied:', url);
},
});
```
@@ -605,11 +648,11 @@ new SocialShareButton({
### Using npm Package
```javascript
-import SocialShareButton from "social-share-button-aossie";
-import "social-share-button-aossie/src/social-share-button.css";
+import SocialShareButton from 'social-share-button-aossie';
+import 'social-share-button-aossie/src/social-share-button.css';
new SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
});
```
@@ -618,10 +661,10 @@ new SocialShareButton({
If you want a reusable React component, copy `src/social-share-button-react.jsx` to your project:
```jsx
-import { SocialShareButton } from "./components/SocialShareButton";
+import { SocialShareButton } from './components/SocialShareButton';
function App() {
- return
;
+ return
;
}
```
@@ -640,7 +683,7 @@ const shareButton = useRef(null);
useEffect(() => {
shareButton.current = new window.SocialShareButton({
- container: "#share-button",
+ container: '#share-button',
});
}, []);
@@ -676,7 +719,7 @@ useEffect(() => {
```jsx
if (window.SocialShareButton) {
- new window.SocialShareButton({ container: "#share-button" });
+ new window.SocialShareButton({ container: '#share-button' });
}
```
@@ -729,14 +772,14 @@ if (window.SocialShareButton) {
```jsx
// Professional networks only
new SocialShareButton({
- container: "#share-button",
- platforms: ["linkedin", "twitter", "email"],
+ container: '#share-button',
+ platforms: ['linkedin', 'twitter', 'email'],
});
// Messaging apps only
new SocialShareButton({
- container: "#share-button",
- platforms: ["whatsapp", "telegram"],
+ container: '#share-button',
+ platforms: ['whatsapp', 'telegram'],
});
```
@@ -744,9 +787,9 @@ new SocialShareButton({
```jsx
new SocialShareButton({
- container: "#share-button",
- buttonStyle: "icon-only",
- theme: "light",
+ container: '#share-button',
+ buttonStyle: 'icon-only',
+ theme: 'light',
});
```
diff --git a/docs/client-guide.md b/docs/client-guide.md
index 6b49350..da7d57d 100644
--- a/docs/client-guide.md
+++ b/docs/client-guide.md
@@ -8,12 +8,12 @@
Your audience is already sharing. Give them a button worth clicking.
-| What you get | What you skip |
-|---|---|
-| One-line install | Backend servers |
+| What you get | What you skip |
+| ---------------------- | --------------------------- |
+| One-line install | Backend servers |
| Works on any framework | Tracking or data collection |
-| Fully customizable | Lock-in or licensing fees |
-| Lightweight & fast | Build step (CDN option) |
+| Fully customizable | Lock-in or licensing fees |
+| Lightweight & fast | Build step (CDN option) |
---
diff --git a/eslint.config.js b/eslint.config.js
index 701e191..9b85c82 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,13 +1,13 @@
-import js from "@eslint/js";
-import globals from "globals";
+import js from '@eslint/js';
+import globals from 'globals';
export default [
js.configs.recommended,
{
- files: ["src/**/*.{js,jsx}"],
+ files: ['src/**/*.{js,jsx}'],
languageOptions: {
- ecmaVersion: "latest",
- sourceType: "module",
+ ecmaVersion: 'latest',
+ sourceType: 'module',
parserOptions: {
ecmaFeatures: {
jsx: true,
@@ -20,15 +20,15 @@ export default [
},
},
rules: {
- "no-console": "error",
- "no-unused-vars": ["warn", { "caughtErrorsIgnorePattern": "^_" }],
- "semi": ["error", "always"],
+ 'no-console': 'error',
+ 'no-unused-vars': ['warn', { caughtErrorsIgnorePattern: '^_' }],
+ semi: ['error', 'always'],
},
},
{
- files: ["eslint.config.js", "**/*.config.js"],
+ files: ['eslint.config.js', '**/*.config.js'],
languageOptions: {
- sourceType: "module",
+ sourceType: 'module',
globals: {
...globals.node,
},
diff --git a/index.html b/index.html
index 90db0da..ae4d812 100644
--- a/index.html
+++ b/index.html
@@ -397,7 +397,7 @@
🚀 Quick Start
Get started in seconds with minimal setup
-
Copy
+
Copy
<link rel="stylesheet" href="social-share-button.css">
@@ -419,10 +419,10 @@ ⚛️ React Integration
First-class React support with hooks
- Copy
+ Copy
-import SocialShareButton from 'social-share-button';
+import SocialShareButton from 'social-share-button';
function App() {
return (
@@ -438,6 +438,59 @@ ⚛️ React Integration
+
+
+
🎸 Remix Integration
+
+ Remix is an SSR-first React framework — all browser APIs must live inside
+ useEffect.
+ Copy src/social-share-button-remix.jsx
+ into your project and follow the steps below.
+
+
+
Step 1 — Load the CSS & JS in app/root.tsx
+
+ Copy
+
+// app/root.tsx
+import type { LinksFunction } from "@remix-run/node";
+
+export const links: LinksFunction = () => [
+ {
+ rel: "stylesheet",
+ href: "https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css",
+ },
+];
+
+// In the <head> of your root component, add:
+// <Scripts /> loads the Remix client bundle.
+// Place the CDN <script> just before </body>:
+// <script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js"></script>
+
+
+
Step 2 — Use the component in a route
+
+ Copy
+
+// app/routes/_index.tsx
+import SocialShareButton from "~/components/social-share-button-remix";
+
+export default function Index() {
+ return (
+ <SocialShareButton
+ url="https://your-website.com"
+ title="Check this out!"
+ description="An amazing website"
+ theme="dark"
+ buttonText="Share"
+ />
+ );
+}
+
+
+
Ready to Get Started?
diff --git a/src/social-share-analytics.js b/src/social-share-analytics.js
index 0caf0d7..4b5fd3a 100644
--- a/src/social-share-analytics.js
+++ b/src/social-share-analytics.js
@@ -123,14 +123,14 @@ class GoogleAnalyticsAdapter extends SocialShareAnalyticsPlugin {
*/
constructor(config = {}) {
super();
- this.eventCategory = config.eventCategory || "social_share";
+ this.eventCategory = config.eventCategory || 'social_share';
}
track(payload) {
- if (typeof window === "undefined" || typeof window.gtag !== "function") {
+ if (typeof window === 'undefined' || typeof window.gtag !== 'function') {
return;
}
- window.gtag("event", payload.eventName, {
+ window.gtag('event', payload.eventName, {
event_category: this.eventCategory,
event_label: payload.platform,
share_platform: payload.platform,
@@ -151,9 +151,9 @@ class GoogleAnalyticsAdapter extends SocialShareAnalyticsPlugin {
class MixpanelAdapter extends SocialShareAnalyticsPlugin {
track(payload) {
if (
- typeof window === "undefined" ||
- typeof window.mixpanel === "undefined" ||
- typeof window.mixpanel.track !== "function"
+ typeof window === 'undefined' ||
+ typeof window.mixpanel === 'undefined' ||
+ typeof window.mixpanel.track !== 'function'
) {
return;
}
@@ -177,9 +177,9 @@ class MixpanelAdapter extends SocialShareAnalyticsPlugin {
class SegmentAdapter extends SocialShareAnalyticsPlugin {
track(payload) {
if (
- typeof window === "undefined" ||
- typeof window.analytics === "undefined" ||
- typeof window.analytics.track !== "function"
+ typeof window === 'undefined' ||
+ typeof window.analytics === 'undefined' ||
+ typeof window.analytics.track !== 'function'
) {
return;
}
@@ -201,7 +201,7 @@ class SegmentAdapter extends SocialShareAnalyticsPlugin {
// -----------------------------------------------------------------------------
class PlausibleAdapter extends SocialShareAnalyticsPlugin {
track(payload) {
- if (typeof window === "undefined" || typeof window.plausible !== "function") {
+ if (typeof window === 'undefined' || typeof window.plausible !== 'function') {
return;
}
window.plausible(payload.eventName, {
@@ -223,9 +223,9 @@ class PlausibleAdapter extends SocialShareAnalyticsPlugin {
class PostHogAdapter extends SocialShareAnalyticsPlugin {
track(payload) {
if (
- typeof window === "undefined" ||
- typeof window.posthog === "undefined" ||
- typeof window.posthog.capture !== "function"
+ typeof window === 'undefined' ||
+ typeof window.posthog === 'undefined' ||
+ typeof window.posthog.capture !== 'function'
) {
return;
}
@@ -256,8 +256,8 @@ class CustomAdapter extends SocialShareAnalyticsPlugin {
*/
constructor(onTrack) {
super();
- if (typeof onTrack !== "function") {
- throw new TypeError("CustomAdapter expects a function argument.");
+ if (typeof onTrack !== 'function') {
+ throw new TypeError('CustomAdapter expects a function argument.');
}
this._onTrack = onTrack;
}
@@ -281,10 +281,10 @@ const adapters = {
CustomAdapter,
};
-if (typeof module !== "undefined" && module.exports) {
+if (typeof module !== 'undefined' && module.exports) {
module.exports = adapters;
}
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
window.SocialShareAnalytics = adapters;
}
diff --git a/src/social-share-button-react.jsx b/src/social-share-button-react.jsx
index 43bf022..b60a5fe 100644
--- a/src/social-share-button-react.jsx
+++ b/src/social-share-button-react.jsx
@@ -1,46 +1,37 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
export const SocialShareButton = ({
url,
title,
- description = "",
+ description = '',
hashtags = [],
- via = "",
- platforms = [
- "whatsapp",
- "facebook",
- "twitter",
- "linkedin",
- "telegram",
- "reddit",
- ],
- theme = "dark",
- buttonText = "Share",
- customClass = "",
+ via = '',
+ platforms = ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit'],
+ theme = 'dark',
+ buttonText = 'Share',
+ customClass = '',
onShare = null,
onCopy = null,
- buttonStyle = "default",
- modalPosition = "center",
+ buttonStyle = 'default',
+ modalPosition = 'center',
// Analytics props — the library itself never collects data.
// Provide any combination to connect your own analytics tools.
- analytics = true, // set to false to disable all event emission
- onAnalytics = null, // (payload) => void — direct callback hook
- analyticsPlugins = [], // array of adapter instances (see social-share-analytics.js)
- componentId = null, // optional string identifier for this instance
- debug = false, // log events to console during development
+ analytics = true, // set to false to disable all event emission
+ onAnalytics = null, // (payload) => void — direct callback hook
+ analyticsPlugins = [], // array of adapter instances (see social-share-analytics.js)
+ componentId = null, // optional string identifier for this instance
+ debug = false, // log events to console during development
}) => {
const containerRef = useRef(null);
const shareButtonRef = useRef(null);
// Auto-detect current URL and title if not provided
- const currentUrl =
- url || (typeof window !== "undefined" ? window.location.href : "");
- const currentTitle =
- title || (typeof document !== "undefined" ? document.title : "");
+ const currentUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
+ const currentTitle = title || (typeof document !== 'undefined' ? document.title : '');
useEffect(() => {
if (containerRef.current && !shareButtonRef.current) {
- if (typeof window !== "undefined" && window.SocialShareButton) {
+ if (typeof window !== 'undefined' && window.SocialShareButton) {
shareButtonRef.current = new window.SocialShareButton({
container: containerRef.current,
url: currentUrl,
diff --git a/src/social-share-button-remix.jsx b/src/social-share-button-remix.jsx
new file mode 100644
index 0000000..7dde4c8
--- /dev/null
+++ b/src/social-share-button-remix.jsx
@@ -0,0 +1,138 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * SocialShareButton — Remix-compatible React component.
+ *
+ * Remix is SSR-first and has no `'use client'` directive, so all browser-API
+ * access must be gated inside a `useEffect` hook. This component:
+ * 1. Initialises the vanilla `window.SocialShareButton` in the first effect
+ * (runs only in the browser, never on the server).
+ * 2. Calls `destroy()` on unmount to prevent memory leaks.
+ * 3. Calls `updateOptions()` whenever any prop changes so the button always
+ * reflects the current route URL / page title without a full re-mount.
+ *
+ * @example
+ * // app/routes/_index.tsx
+ * import SocialShareButton from '~/components/social-share-button-remix';
+ *
+ * export default function Index() {
+ * return (
+ *
+ * );
+ * }
+ */
+export default function SocialShareButton({
+ url = '',
+ title = '',
+ description = '',
+ hashtags = [],
+ via = '',
+ platforms = ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit'],
+ theme = 'dark',
+ buttonText = 'Share',
+ customClass = '',
+ onShare = null,
+ onCopy = null,
+ buttonStyle = 'default',
+ modalPosition = 'center',
+ analytics = false,
+ onAnalytics = null,
+ analyticsPlugins = [],
+ componentId = null,
+ debug = false,
+}) {
+ const containerRef = useRef(null);
+ const shareButtonRef = useRef(null);
+
+ const currentUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
+ const currentTitle = title || (typeof document !== 'undefined' ? document.title : '');
+
+ // ── Mount: initialise once in the browser ──────────────────────────────
+ useEffect(() => {
+ // SSR guard — Remix always server-renders; browser APIs only available here.
+ if (typeof window === 'undefined' || !window.SocialShareButton) return;
+
+ 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,
+ });
+
+ // Cleanup on unmount
+ return () => {
+ if (shareButtonRef.current) {
+ shareButtonRef.current.destroy();
+ shareButtonRef.current = null;
+ }
+ };
+ }, []);
+
+ // ── Prop updates: keep the button in sync without re-mounting ──────────
+ useEffect(() => {
+ if (!shareButtonRef.current) return;
+
+ shareButtonRef.current.updateOptions({
+ url: currentUrl,
+ title: currentTitle,
+ description,
+ hashtags,
+ via,
+ platforms,
+ theme,
+ buttonText,
+ customClass,
+ onShare,
+ onCopy,
+ buttonStyle,
+ modalPosition,
+ analytics,
+ onAnalytics,
+ analyticsPlugins,
+ componentId,
+ debug,
+ });
+ }, [
+ currentUrl,
+ currentTitle,
+ description,
+ hashtags,
+ via,
+ platforms,
+ theme,
+ buttonText,
+ customClass,
+ onShare,
+ onCopy,
+ buttonStyle,
+ modalPosition,
+ analytics,
+ onAnalytics,
+ analyticsPlugins,
+ componentId,
+ debug,
+ ]);
+
+ return
;
+}
diff --git a/src/social-share-button.css b/src/social-share-button.css
index 0c90b36..3bde1aa 100644
--- a/src/social-share-button.css
+++ b/src/social-share-button.css
@@ -19,8 +19,7 @@
cursor: pointer;
transition: all 0.3s ease;
font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
- Cantarell, sans-serif;
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
outline: none;
}
@@ -262,8 +261,7 @@
text-align: center;
max-width: 80px;
font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
- Cantarell, sans-serif;
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.social-share-modal-overlay.light .social-share-platform-btn span {
@@ -299,8 +297,7 @@
font-size: 14px;
outline: none;
font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
- Cantarell, sans-serif;
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.social-share-modal-overlay.light .social-share-link-input input {
@@ -324,8 +321,7 @@
transition: all 0.2s ease;
min-width: 80px;
font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
- Cantarell, sans-serif;
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
outline: none;
}
diff --git a/src/social-share-button.js b/src/social-share-button.js
index 5f05397..686766f 100644
--- a/src/social-share-button.js
+++ b/src/social-share-button.js
@@ -5,39 +5,35 @@
*/
/** Analytics event schema version. Increment when the payload shape changes. */
-const ANALYTICS_SCHEMA_VERSION = "1.0";
+const ANALYTICS_SCHEMA_VERSION = '1.0';
class SocialShareButton {
constructor(options = {}) {
this.options = {
- url:
- options.url ||
- (typeof window !== "undefined" ? window.location.href : ""),
- title:
- options.title ||
- (typeof document !== "undefined" ? document.title : ""),
- description: options.description || "",
+ url: options.url || (typeof window !== 'undefined' ? window.location.href : ''),
+ title: options.title || (typeof document !== 'undefined' ? document.title : ''),
+ description: options.description || '',
hashtags: options.hashtags || [],
- via: options.via || "",
+ via: options.via || '',
platforms: options.platforms || [
- "whatsapp",
- "facebook",
- "twitter",
- "linkedin",
- "telegram",
- "reddit",
+ 'whatsapp',
+ 'facebook',
+ 'twitter',
+ 'linkedin',
+ 'telegram',
+ 'reddit',
],
- theme: options.theme || "dark",
- buttonText: options.buttonText || "Share",
- customClass: options.customClass || "",
- buttonColor: options.buttonColor || "",
- buttonHoverColor: options.buttonHoverColor || "",
+ theme: options.theme || 'dark',
+ buttonText: options.buttonText || 'Share',
+ customClass: options.customClass || '',
+ buttonColor: options.buttonColor || '',
+ buttonHoverColor: options.buttonHoverColor || '',
onShare: options.onShare || null,
onCopy: options.onCopy || null,
container: options.container || null,
showButton: options.showButton !== false,
- buttonStyle: options.buttonStyle || "default",
- modalPosition: options.modalPosition || "center",
+ buttonStyle: options.buttonStyle || 'default',
+ modalPosition: options.modalPosition || 'center',
// Analytics — the library emits events but never collects or sends data itself.
// Website owners wire up their own analytics tools via these options.
analytics: options.analytics !== false, // set to false to disable all event emission
@@ -55,14 +51,13 @@ class SocialShareButton {
this.handleKeydown = null;
this.listeners = []; // Central registry for all event listeners
- this.openTimeout = null; // Track setTimeout for openModal animation
+ this.openTimeout = null; // Track setTimeout for openModal animation
this.closeTimeout = null; // Track setTimeout for closeModal animation
this.feedbackTimeout = null; // Track setTimeout for copy feedback reset
this.ownsBodyLock = false; // Track if this instance owns the body overflow lock
this.eventsAttached = false; // Guard against multiple attachEvents() calls
this.isDestroyed = false; // Track if instance has been destroyed (prevents async callbacks)
-
if (this.options.container) {
this.init();
}
@@ -78,9 +73,9 @@ class SocialShareButton {
}
createButton() {
- const button = document.createElement("button");
+ const button = document.createElement('button');
button.className = `social-share-btn ${this.options.buttonStyle} ${this.options.customClass}`;
- button.setAttribute("aria-label", "Share");
+ button.setAttribute('aria-label', 'Share');
button.innerHTML = `
`;
- const urlInputContainer = modal.querySelector(".social-share-link-input");
- const urlInput = document.createElement("input");
- urlInput.type = "text";
+ const urlInputContainer = modal.querySelector('.social-share-link-input');
+ const urlInput = document.createElement('input');
+ urlInput.type = 'text';
urlInput.value = this.options.url;
urlInput.readOnly = true;
- urlInput.setAttribute("aria-label", "URL to share");
+ urlInput.setAttribute('aria-label', 'URL to share');
urlInputContainer.appendChild(urlInput);
this.modal = modal;
@@ -137,38 +132,38 @@ class SocialShareButton {
getPlatformsHTML() {
const platforms = {
whatsapp: {
- name: "WhatsApp",
- color: "#25D366",
+ name: 'WhatsApp',
+ color: '#25D366',
icon: '
',
},
facebook: {
- name: "Facebook",
- color: "#1877F2",
+ name: 'Facebook',
+ color: '#1877F2',
icon: '
',
},
twitter: {
- name: "X",
- color: "#000000",
+ name: 'X',
+ color: '#000000',
icon: '
',
},
linkedin: {
- name: "LinkedIn",
- color: "#0A66C2",
+ name: 'LinkedIn',
+ color: '#0A66C2',
icon: '
',
},
telegram: {
- name: "Telegram",
- color: "#0088cc",
+ name: 'Telegram',
+ color: '#0088cc',
icon: '
',
},
reddit: {
- name: "Reddit",
- color: "#FF4500",
+ name: 'Reddit',
+ color: '#FF4500',
icon: '
',
},
email: {
- name: "Email",
- color: "#7f7f7f",
+ name: 'Email',
+ color: '#7f7f7f',
icon: '
',
},
};
@@ -186,7 +181,7 @@ class SocialShareButton {
`;
})
- .join("");
+ .join('');
}
getShareURL(platform) {
@@ -194,33 +189,28 @@ class SocialShareButton {
const encodedUrl = encodeURIComponent(url);
const encodedTitle = encodeURIComponent(title);
// const encodedDesc = encodeURIComponent(description);
- const hashtagString = hashtags.length ? "#" + hashtags.join(" #") : "";
+ const hashtagString = hashtags.length ? '#' + hashtags.join(' #') : '';
// Build platform-specific messages with customizable parameters
- let whatsappMessage,
- facebookMessage,
- twitterMessage,
- telegramMessage,
- redditTitle,
- emailBody;
+ let whatsappMessage, facebookMessage, twitterMessage, telegramMessage, redditTitle, emailBody;
// WhatsApp: Casual with emoji
- whatsappMessage = `\u{1F680} ${title}${description ? "\n\n" + description : ""}${hashtagString ? "\n\n" + hashtagString : ""}\n\nLive on the site \u{1F440}\nClean UI, smooth flow \u{2014} worth peeking\n\u{1F447}`;
+ whatsappMessage = `\u{1F680} ${title}${description ? '\n\n' + description : ''}${hashtagString ? '\n\n' + hashtagString : ''}\n\nLive on the site \u{1F440}\nClean UI, smooth flow \u{2014} worth peeking\n\u{1F447}`;
// Facebook: Title + Description
- facebookMessage = `${title}${description ? "\n\n" + description : ""}${hashtagString ? "\n\n" + hashtagString : ""}`;
+ facebookMessage = `${title}${description ? '\n\n' + description : ''}${hashtagString ? '\n\n' + hashtagString : ''}`;
// Twitter: Title + Description + Hashtags + Via
- twitterMessage = `${title}${description ? "\n\n" + description : ""}${hashtagString ? "\n" + hashtagString : ""}`;
+ twitterMessage = `${title}${description ? '\n\n' + description : ''}${hashtagString ? '\n' + hashtagString : ''}`;
// Telegram: Casual with emoji
- telegramMessage = `\u{1F517} ${title}${description ? "\n\n" + description : ""}${hashtagString ? "\n\n" + hashtagString : ""}\n\nLive + working\nClean stuff, take a look \u{1F447}`;
+ telegramMessage = `\u{1F517} ${title}${description ? '\n\n' + description : ''}${hashtagString ? '\n\n' + hashtagString : ''}\n\nLive + working\nClean stuff, take a look \u{1F447}`;
// Reddit: Title + Description
- redditTitle = `${title}${description ? " - " + description : ""}`;
+ redditTitle = `${title}${description ? ' - ' + description : ''}`;
// Email: Friendly greeting
- emailBody = `Hey \u{1F44B}\n\nSharing a clean project I came across:\n${title}${description ? "\n\n" + description : ""}\n\nLive, simple, and usable \u{2014} take a look \u{1F447}`;
+ emailBody = `Hey \u{1F44B}\n\nSharing a clean project I came across:\n${title}${description ? '\n\n' + description : ''}\n\nLive, simple, and usable \u{2014} take a look \u{1F447}`;
const encodedWhatsapp = encodeURIComponent(whatsappMessage);
const encodedFacebook = encodeURIComponent(facebookMessage);
@@ -232,14 +222,14 @@ class SocialShareButton {
const urls = {
whatsapp: `https://wa.me/?text=${encodedWhatsapp}%20${encodedUrl}`,
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}"e=${encodedFacebook}`,
- twitter: `https://twitter.com/intent/tweet?text=${encodedTwitter}&url=${encodedUrl}${via ? "&via=" + encodeURIComponent(via) : ""}`,
+ twitter: `https://twitter.com/intent/tweet?text=${encodedTwitter}&url=${encodedUrl}${via ? '&via=' + encodeURIComponent(via) : ''}`,
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
telegram: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTelegram}`,
reddit: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedReddit}`,
email: `mailto:?subject=${encodedTitle}&body=${encodedEmail}%20${encodedUrl}`,
};
- return urls[platform] || "";
+ return urls[platform] || '';
}
addEventListener(element, type, handler, options = false) {
@@ -265,7 +255,7 @@ class SocialShareButton {
// Button click to open modal
if (this.button) {
const openModalHandler = () => this.openModal();
- this.addEventListener(this.button, "click", openModalHandler);
+ this.addEventListener(this.button, 'click', openModalHandler);
}
// Modal overlay click to close
@@ -274,43 +264,41 @@ class SocialShareButton {
this.closeModal();
}
};
- this.addEventListener(this.modal, "click", modalClickHandler);
+ this.addEventListener(this.modal, 'click', modalClickHandler);
// Close button
- const closeBtn = this.modal.querySelector(".social-share-modal-close");
+ const closeBtn = this.modal.querySelector('.social-share-modal-close');
const closeBtnHandler = () => this.closeModal();
- this.addEventListener(closeBtn, "click", closeBtnHandler);
+ this.addEventListener(closeBtn, 'click', closeBtnHandler);
// Platform buttons
- const platformBtns = this.modal.querySelectorAll(
- ".social-share-platform-btn",
- );
+ const platformBtns = this.modal.querySelectorAll('.social-share-platform-btn');
platformBtns.forEach((btn) => {
const platformHandler = () => {
const platform = btn.dataset.platform;
this.share(platform);
};
- this.addEventListener(btn, "click", platformHandler);
+ this.addEventListener(btn, 'click', platformHandler);
});
// Copy button
- const copyBtn = this.modal.querySelector(".social-share-copy-btn");
+ const copyBtn = this.modal.querySelector('.social-share-copy-btn');
const copyBtnHandler = () => this.copyLink();
- this.addEventListener(copyBtn, "click", copyBtnHandler);
+ this.addEventListener(copyBtn, 'click', copyBtnHandler);
// Input click to select
- const input = this.modal.querySelector(".social-share-link-input input");
+ const input = this.modal.querySelector('.social-share-link-input input');
const inputSelectHandler = (e) => e.target.select();
- this.addEventListener(input, "click", inputSelectHandler);
+ this.addEventListener(input, 'click', inputSelectHandler);
// ESC key to close
this.handleKeydown = (e) => {
- if (e.key === "Escape" && this.isModalOpen) {
+ if (e.key === 'Escape' && this.isModalOpen) {
this.closeModal();
}
};
- if (typeof document !== "undefined") {
- document.addEventListener("keydown", this.handleKeydown);
+ if (typeof document !== 'undefined') {
+ document.addEventListener('keydown', this.handleKeydown);
}
this.eventsAttached = true; // Mark as attached
@@ -320,11 +308,11 @@ class SocialShareButton {
if (!this.modal) return;
this.isModalOpen = true;
- this.modal.style.display = "flex";
- this._emit("social_share_popup_open", "popup_open");
+ this.modal.style.display = 'flex';
+ this._emit('social_share_popup_open', 'popup_open');
// Shared body overflow management: only increment counter if this instance doesn't already own the lock
- if (typeof document !== "undefined" && document.body) {
+ if (typeof document !== 'undefined' && document.body) {
if (!this.ownsBodyLock) {
// Only increment if this instance doesn't already own a lock
if (SocialShareButton.openModalCount === 0) {
@@ -334,7 +322,7 @@ class SocialShareButton {
SocialShareButton.openModalCount++;
this.ownsBodyLock = true; // Mark that this instance owns a lock
}
- document.body.style.overflow = "hidden";
+ document.body.style.overflow = 'hidden';
}
// Clear any pending animations (both open and close to prevent race conditions)
@@ -349,8 +337,9 @@ class SocialShareButton {
// Animate in
this.openTimeout = setTimeout(() => {
- if (this.modal) { // Safety check in case destroy() was called
- this.modal.classList.add("active");
+ if (this.modal) {
+ // Safety check in case destroy() was called
+ this.modal.classList.add('active');
}
this.openTimeout = null;
}, 10);
@@ -359,8 +348,8 @@ class SocialShareButton {
closeModal() {
if (!this.modal) return; // Safety check
- this.modal.classList.remove("active");
- this._emit("social_share_popup_close", "popup_close");
+ this.modal.classList.remove('active');
+ this._emit('social_share_popup_close', 'popup_close');
// Clear any pending animations (both open and close to prevent race conditions)
if (this.openTimeout) {
@@ -373,12 +362,13 @@ class SocialShareButton {
}
this.closeTimeout = setTimeout(() => {
- if (this.modal) { // Safety check in case destroy() was called
+ if (this.modal) {
+ // Safety check in case destroy() was called
this.isModalOpen = false;
- this.modal.style.display = "none";
+ this.modal.style.display = 'none';
// Shared body overflow management: only decrement if this instance owns the lock
- if (this.ownsBodyLock && typeof document !== "undefined" && document.body) {
+ if (this.ownsBodyLock && typeof document !== 'undefined' && document.body) {
// Decrement counter (guard against negative)
if (SocialShareButton.openModalCount > 0) {
SocialShareButton.openModalCount--;
@@ -387,7 +377,7 @@ class SocialShareButton {
// Restore original overflow only when all modals are closed
if (SocialShareButton.openModalCount === 0) {
- document.body.style.overflow = SocialShareButton.originalBodyOverflow || "";
+ document.body.style.overflow = SocialShareButton.originalBodyOverflow || '';
SocialShareButton.originalBodyOverflow = null;
}
}
@@ -400,25 +390,21 @@ class SocialShareButton {
const shareUrl = this.getShareURL(platform);
if (shareUrl) {
- this._emit("social_share_click", "share", { platform });
+ this._emit('social_share_click', 'share', { platform });
- if (platform === "email") {
+ if (platform === 'email') {
window.location.href = shareUrl;
} else {
- window.open(
- shareUrl,
- "_blank",
- "noopener,noreferrer,width=600,height=600",
- );
+ window.open(shareUrl, '_blank', 'noopener,noreferrer,width=600,height=600');
}
- this._emit("social_share_success", "share", { platform });
+ this._emit('social_share_success', 'share', { platform });
if (this.options.onShare) {
this.options.onShare(platform, this.options.url);
}
} else {
- this._emit("social_share_error", "error", {
+ this._emit('social_share_error', 'error', {
platform,
errorMessage: `No share URL configured for platform: ${platform}`,
});
@@ -426,8 +412,8 @@ class SocialShareButton {
}
copyLink() {
- const input = this.modal.querySelector(".social-share-link-input input");
- const copyBtn = this.modal.querySelector(".social-share-copy-btn");
+ const input = this.modal.querySelector('.social-share-link-input input');
+ const copyBtn = this.modal.querySelector('.social-share-copy-btn');
// Check if clipboard API is available
if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -437,9 +423,9 @@ class SocialShareButton {
// Guard against async callback after destroy
if (this.isDestroyed) return;
- copyBtn.textContent = "Copied!";
- copyBtn.classList.add("copied");
- this._emit("social_share_copy", "copy");
+ copyBtn.textContent = 'Copied!';
+ copyBtn.classList.add('copied');
+ this._emit('social_share_copy', 'copy');
if (this.options.onCopy) {
this.options.onCopy(this.options.url);
@@ -453,13 +439,12 @@ class SocialShareButton {
// Track feedback timeout to prevent callback after destroy
this.feedbackTimeout = setTimeout(() => {
if (this.isDestroyed || !copyBtn) return; // Safety check
- copyBtn.textContent = "Copy";
- copyBtn.classList.remove("copied");
+ copyBtn.textContent = 'Copy';
+ copyBtn.classList.remove('copied');
this.feedbackTimeout = null;
}, 2000);
})
.catch(() => {
-
// Fallback to manual selection
this.fallbackCopy(input, copyBtn);
});
@@ -476,11 +461,11 @@ class SocialShareButton {
try {
input.select();
input.setSelectionRange(0, 99999); // For mobile devices
- document.execCommand("copy");
+ document.execCommand('copy');
- copyBtn.textContent = "Copied!";
- copyBtn.classList.add("copied");
- this._emit("social_share_copy", "copy");
+ copyBtn.textContent = 'Copied!';
+ copyBtn.classList.add('copied');
+ this._emit('social_share_copy', 'copy');
if (this.options.onCopy) {
this.options.onCopy(this.options.url);
@@ -494,12 +479,12 @@ class SocialShareButton {
// Track feedback timeout to prevent callback after destroy
this.feedbackTimeout = setTimeout(() => {
if (this.isDestroyed || !copyBtn) return; // Safety check
- copyBtn.textContent = "Copy";
- copyBtn.classList.remove("copied");
+ copyBtn.textContent = 'Copy';
+ copyBtn.classList.remove('copied');
this.feedbackTimeout = null;
}, 2000);
} catch (_err) {
- copyBtn.textContent = "Failed";
+ copyBtn.textContent = 'Failed';
// Clear any existing feedback timeout
if (this.feedbackTimeout) {
@@ -509,7 +494,7 @@ class SocialShareButton {
// Track feedback timeout to prevent callback after destroy
this.feedbackTimeout = setTimeout(() => {
if (this.isDestroyed || !copyBtn) return; // Safety check
- copyBtn.textContent = "Copy";
+ copyBtn.textContent = 'Copy';
this.feedbackTimeout = null;
}, 2000);
}
@@ -517,8 +502,8 @@ class SocialShareButton {
destroy() {
if (this.handleKeydown) {
- if (typeof document !== "undefined") {
- document.removeEventListener("keydown", this.handleKeydown);
+ if (typeof document !== 'undefined') {
+ document.removeEventListener('keydown', this.handleKeydown);
}
this.handleKeydown = null;
}
@@ -544,17 +529,11 @@ class SocialShareButton {
// Remove custom color handlers
if (this.button && this.customColorMouseEnterHandler) {
- this.button.removeEventListener(
- "mouseenter",
- this.customColorMouseEnterHandler,
- );
+ this.button.removeEventListener('mouseenter', this.customColorMouseEnterHandler);
this.customColorMouseEnterHandler = null;
}
if (this.button && this.customColorMouseLeaveHandler) {
- this.button.removeEventListener(
- "mouseleave",
- this.customColorMouseLeaveHandler,
- );
+ this.button.removeEventListener('mouseleave', this.customColorMouseLeaveHandler);
this.customColorMouseLeaveHandler = null;
}
@@ -567,7 +546,7 @@ class SocialShareButton {
}
// Shared body overflow management: only decrement if this instance owns the lock
- if (this.ownsBodyLock && typeof document !== "undefined" && document.body) {
+ if (this.ownsBodyLock && typeof document !== 'undefined' && document.body) {
// Decrement counter (guard against negative)
if (SocialShareButton.openModalCount > 0) {
SocialShareButton.openModalCount--;
@@ -576,7 +555,7 @@ class SocialShareButton {
// Restore original overflow only when all modals are closed
if (SocialShareButton.openModalCount === 0) {
- document.body.style.overflow = SocialShareButton.originalBodyOverflow || "";
+ document.body.style.overflow = SocialShareButton.originalBodyOverflow || '';
SocialShareButton.originalBodyOverflow = null;
}
}
@@ -593,14 +572,14 @@ class SocialShareButton {
// Update URL in modal if it exists
if (this.modal) {
- const input = this.modal.querySelector(".social-share-link-input input");
+ const input = this.modal.querySelector('.social-share-link-input input');
if (input) {
input.value = this.options.url;
}
}
// Reapply custom colors if color option changed
- if ("buttonColor" in options || "buttonHoverColor" in options) {
+ if ('buttonColor' in options || 'buttonHoverColor' in options) {
this.applyCustomColors();
}
}
@@ -609,44 +588,38 @@ class SocialShareButton {
if (!this.button) return;
// Remove legacy global style tag to prevent cross-instance color bleed.
- const styleTag = document.getElementById("social-share-custom-colors");
+ const styleTag = document.getElementById('social-share-custom-colors');
if (styleTag && styleTag.parentNode) {
styleTag.parentNode.removeChild(styleTag);
}
if (this.customColorMouseEnterHandler) {
- this.button.removeEventListener(
- "mouseenter",
- this.customColorMouseEnterHandler,
- );
+ this.button.removeEventListener('mouseenter', this.customColorMouseEnterHandler);
this.customColorMouseEnterHandler = null;
}
if (this.customColorMouseLeaveHandler) {
- this.button.removeEventListener(
- "mouseleave",
- this.customColorMouseLeaveHandler,
- );
+ this.button.removeEventListener('mouseleave', this.customColorMouseLeaveHandler);
this.customColorMouseLeaveHandler = null;
}
- this.button.style.removeProperty("background-color");
- this.button.style.removeProperty("background-image");
- this.button.style.removeProperty("border-color");
+ this.button.style.removeProperty('background-color');
+ this.button.style.removeProperty('background-image');
+ this.button.style.removeProperty('border-color');
- const baseColor = this.options.buttonColor || "";
+ const baseColor = this.options.buttonColor || '';
const hoverColor = this.options.buttonHoverColor || baseColor;
if (!baseColor && !hoverColor) return;
if (baseColor) {
- this.button.style.backgroundImage = "none";
+ this.button.style.backgroundImage = 'none';
this.button.style.backgroundColor = baseColor;
this.button.style.borderColor = baseColor;
}
this.customColorMouseEnterHandler = () => {
if (hoverColor) {
- this.button.style.backgroundImage = "none";
+ this.button.style.backgroundImage = 'none';
this.button.style.backgroundColor = hoverColor;
this.button.style.borderColor = hoverColor;
}
@@ -654,26 +627,20 @@ class SocialShareButton {
this.customColorMouseLeaveHandler = () => {
if (baseColor) {
- this.button.style.backgroundImage = "none";
+ this.button.style.backgroundImage = 'none';
this.button.style.backgroundColor = baseColor;
this.button.style.borderColor = baseColor;
} else {
- this.button.style.removeProperty("background-color");
- this.button.style.removeProperty("background-image");
- this.button.style.removeProperty("border-color");
+ this.button.style.removeProperty('background-color');
+ this.button.style.removeProperty('background-image');
+ this.button.style.removeProperty('border-color');
}
};
// Note: Custom color handlers are managed separately (not in listeners)
// because they need to be removed/reapplied when colors change
- this.button.addEventListener(
- "mouseenter",
- this.customColorMouseEnterHandler,
- );
- this.button.addEventListener(
- "mouseleave",
- this.customColorMouseLeaveHandler,
- );
+ this.button.addEventListener('mouseenter', this.customColorMouseEnterHandler);
+ this.button.addEventListener('mouseleave', this.customColorMouseLeaveHandler);
}
// ---------------------------------------------------------------------------
@@ -699,8 +666,8 @@ class SocialShareButton {
*/
_getContainer() {
if (!this.options.container) return null;
- if (typeof document === "undefined") return null;
- return typeof this.options.container === "string"
+ if (typeof document === 'undefined') return null;
+ return typeof this.options.container === 'string'
? document.querySelector(this.options.container)
: this.options.container;
}
@@ -731,7 +698,7 @@ class SocialShareButton {
const payload = {
version: ANALYTICS_SCHEMA_VERSION,
- source: "social-share-button",
+ source: 'social-share-button',
eventName,
interactionType,
platform: extra.platform || null,
@@ -748,14 +715,14 @@ class SocialShareButton {
// Optional console output for development / debugging
if (this.options.debug) {
// eslint-disable-next-line no-console
- console.log("[SocialShareButton Analytics]", payload);
+ console.log('[SocialShareButton Analytics]', payload);
}
// Path 1 — DOM CustomEvent (framework-agnostic, CDN-friendly)
// Bubbles from the container element so delegated listeners work naturally.
- if (typeof window !== "undefined" && typeof CustomEvent !== "undefined") {
+ if (typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') {
try {
- const domEvent = new CustomEvent("social-share", {
+ const domEvent = new CustomEvent('social-share', {
bubbles: true,
cancelable: false,
composed: true, // crosses shadow-DOM boundaries; safe to set in all envs
@@ -763,23 +730,29 @@ class SocialShareButton {
});
const el = this._getContainer();
(el || document).dispatchEvent(domEvent);
- } catch (_) {}
+ } catch (_) {
+ // ignore
+ }
}
// Path 2 — onAnalytics callback (direct, single-consumer hook)
- if (typeof this.options.onAnalytics === "function") {
+ if (typeof this.options.onAnalytics === 'function') {
try {
this.options.onAnalytics(payload);
- } catch (_) {}
+ } catch (_) {
+ // ignore
+ }
}
// Path 3 — plugin / adapter registry (supports multiple simultaneous consumers)
if (Array.isArray(this.options.analyticsPlugins)) {
for (const plugin of this.options.analyticsPlugins) {
- if (plugin && typeof plugin.track === "function") {
+ if (plugin && typeof plugin.track === 'function') {
try {
plugin.track(payload);
- } catch (_) {}
+ } catch (_) {
+ // ignore
+ }
}
}
}
@@ -791,10 +764,10 @@ SocialShareButton.openModalCount = 0;
SocialShareButton.originalBodyOverflow = null;
// Export for different module systems
-if (typeof module !== "undefined" && module.exports) {
+if (typeof module !== 'undefined' && module.exports) {
module.exports = SocialShareButton;
}
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
window.SocialShareButton = SocialShareButton;
}