` where you want the button to appear, then initialize the button after the DOM is ready:\r\n\r\n```javascript\r\n// Add
to your component's template/HTML first,\r\n// then initialize once the DOM is ready (e.g., in mounted(), ngAfterViewInit(), or useEffect()):\r\nnew window.SocialShareButton({\r\n container: \"#share-button\",\r\n});\r\n```\r\n\r\n\r\n\r\n
\r\nβοΈ Preact
\r\n\r\n### Step 1: Add CDN to `index.html`\r\n\r\n```html\r\n\r\n \r\n\r\n\r\n \r\n \r\n\r\n```\r\n\r\n### Step 2: Add to a layout or header component\r\n\r\nOpen an **existing** component that renders on every page β typically `src/components/Header.jsx`, `src/components/Navbar.jsx`, or your root `App.jsx`. Add the snippet below to that component so the share button is consistently available across your app.\r\n\r\n```jsx\r\nimport { useEffect, useRef } from \"preact/hooks\";\r\n\r\n// β¬οΈ Replace 'Header' with the name of the component where you want the\r\n// share button to appear β e.g. Navbar, MainLayout, App, etc.\r\nexport default function Header() {\r\n const shareButtonRef = useRef(null);\r\n const containerRef = useRef(null);\r\n const initRef = useRef(false);\r\n\r\n useEffect(() => {\r\n if (initRef.current || !window.SocialShareButton || !containerRef.current) return;\r\n\r\n shareButtonRef.current = new window.SocialShareButton({\r\n container: \"#share-button\",\r\n });\r\n initRef.current = true;\r\n\r\n return () => {\r\n if (shareButtonRef.current?.destroy) {\r\n shareButtonRef.current.destroy();\r\n }\r\n initRef.current = false;\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n \r\n\r\n---\r\n\r\n## Configuration\r\n\r\n### Basic Options\r\n\r\n```jsx\r\nnew SocialShareButton({\r\n container: \"#share-button\", // Required: CSS selector or DOM element\r\n url: \"https://example.com\", // Optional: defaults to window.location.href\r\n title: \"Custom Title\", // Optional: defaults to document.title\r\n buttonText: \"Share\", // Optional: button label text\r\n buttonStyle: \"primary\", // default | primary | compact | icon-only\r\n theme: \"dark\", // dark | light\r\n platforms: [\"twitter\", \"linkedin\"], // Optional: defaults to all platforms\r\n});\r\n```\r\n\r\n### All Available Options\r\n\r\n| Option | Type | Default | Description |\r\n| ------------------ | -------------- | ---------------------- | -------------------------------------------------- |\r\n| `container` | string/Element | - | **Required.** CSS selector or DOM element |\r\n| `url` | string | `window.location.href` | URL to share |\r\n| `title` | string | `document.title` | Share title/headline |\r\n| `description` | string | `''` | Additional description text |\r\n| `hashtags` | array | `[]` | Hashtags for posts (e.g., `['js', 'webdev']`) |\r\n| `via` | string | `''` | Twitter handle (without @) |\r\n| `platforms` | array | All platforms | Platforms to show (see below) |\r\n| `buttonText` | string | `'Share'` | Button label text |\r\n| `buttonStyle` | string | `'default'` | `default`, `primary`, `compact`, `icon-only` |\r\n| `buttonColor` | string | `''` | Custom button background color |\r\n| `buttonHoverColor` | string | `''` | Custom button hover color |\r\n| `customClass` | string | `''` | Additional CSS class for button |\r\n| `theme` | string | `'dark'` | `dark` or `light` |\r\n| `modalPosition` | string | `'center'` | Modal position on screen |\r\n| `showButton` | boolean | `true` | Show/hide the share button |\r\n| `onShare` | function | `null` | Callback when user shares: `(platform, url) => {}` |\r\n| `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` |\r\n\r\n**Available Platforms:** \r\n`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest`, `discord`\r\n\r\n### Customize Share Message/Post Text\r\n\r\nControl the text that appears when users share to social platforms:\r\n\r\n```jsx\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n url: \"https://myproject.com\",\r\n title: \"Check out my awesome project!\", // Main title/headline\r\n description: \"An amazing tool for developers\", // Additional description\r\n hashtags: [\"javascript\", \"webdev\", \"opensource\"], // Hashtags included in posts\r\n via: \"MyProjectHandle\", // Your Twitter handle\r\n});\r\n```\r\n\r\n**How messages are customized per platform:**\r\n\r\n- **WhatsApp:** `title` + `description` + `hashtags` + link\r\n- **Facebook:** `title` + `description` + `hashtags` + link\r\n- **Twitter/X:** `title` + `description` + `hashtags` + `via` handle + link\r\n- **Telegram:** `title` + `description` + `hashtags` + link\r\n- **LinkedIn:** `title` + `description` + link\r\n- **Reddit:** `title` - `description` (used as title)\r\n- **Email:** Subject = `title`, Body = `description` + link\r\n- **Pinterest:** `title` + `description` + `hashtags` + link\r\n- **Discord:** `title` + `description` + `hashtags` + link\r\n-\r\n\r\n### Customize Button Color & Appearance\r\n\r\n**Option 1: Use Pre-built Styles** (Easiest)\r\n\r\n```jsx\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n buttonStyle: \"primary\", // or 'default', 'compact', 'icon-only'\r\n});\r\n```\r\n\r\n**Option 2: Programmatic Color Customization** (Recommended)\r\n\r\nPass `buttonColor` and `buttonHoverColor` to match your project's color scheme:\r\n\r\n```jsx\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n buttonColor: \"#ff6b6b\", // Button background color\r\n buttonHoverColor: \"#ff5252\", // Hover state color\r\n});\r\n```\r\n\r\n**Option 3: CSS Class Customization** (Advanced)\r\n\r\nFor more complex styling, use a custom CSS class:\r\n\r\n```jsx\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n buttonStyle: \"primary\",\r\n customClass: \"my-custom-button\",\r\n});\r\n```\r\n\r\nThen in your CSS file:\r\n\r\n```css\r\n/* Override the button background color */\r\n.my-custom-button.social-share-btn {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n}\r\n\r\n/* Customize hover state */\r\n.my-custom-button.social-share-btn:hover {\r\n background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);\r\n}\r\n```\r\n\r\n**Color Examples:**\r\n\r\n```jsx\r\n// Material Design Red\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n buttonColor: \"#f44336\",\r\n buttonHoverColor: \"#da190b\",\r\n});\r\n\r\n// Tailwind Blue\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n buttonColor: \"#3b82f6\",\r\n buttonHoverColor: \"#2563eb\",\r\n});\r\n\r\n// Custom Brand Color\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n buttonColor: \"#your-brand-color\",\r\n buttonHoverColor: \"#your-brand-color-dark\",\r\n});\r\n```\r\n\r\n### Button Styles\r\n\r\n| Style | Description |\r\n| ----------- | ---------------------------------- |\r\n| `default` | Standard button with icon and text |\r\n| `primary` | Gradient button (recommended) |\r\n| `compact` | Smaller size for tight spaces |\r\n| `icon-only` | Icon without text |\r\n\r\n### Callbacks\r\n\r\n```jsx\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n onShare: (platform, url) => {\r\n console.log(`Shared on ${platform}: ${url}`);\r\n },\r\n onCopy: (url) => {\r\n console.log(\"Link copied:\", url);\r\n },\r\n});\r\n```\r\n\r\n---\r\n\r\n## Advanced Usage\r\n\r\n### Using npm Package\r\n\r\n```javascript\r\nimport SocialShareButton from \"@aossie-org/social-share-button\";\r\nimport \"@aossie-org/social-share-button/src/social-share-button.css\";\r\n\r\nnew SocialShareButton({\r\n container: \"#share-button\",\r\n});\r\n```\r\n\r\n### React Wrapper Component (Optional)\r\n\r\nIf you want a reusable React component, copy `src/social-share-button-react.jsx` to your project:\r\n\r\n```jsx\r\nimport { SocialShareButton } from \"./components/SocialShareButton\";\r\n\r\nfunction App() {\r\n return
;\r\n}\r\n```\r\n\r\n### Update URL Dynamically (SPA)\r\n\r\n```jsx\r\n// Next.js App Router: import { usePathname } from \"next/navigation\";\r\n// Next.js Pages Router: import { useRouter } from \"next/router\";\r\n// React Router: import { useLocation } from \"react-router-dom\";\r\n\r\nconst shareButton = useRef(null);\r\n// Get the current pathname from your router, e.g.:\r\n// const pathname = usePathname(); // Next.js App Router\r\n// const { pathname } = useRouter(); // Next.js Pages Router\r\n// const { pathname } = useLocation(); // React Router\r\n\r\nuseEffect(() => {\r\n shareButton.current = new window.SocialShareButton({\r\n container: \"#share-button\",\r\n });\r\n}, []);\r\n\r\nuseEffect(() => {\r\n if (shareButton.current) {\r\n shareButton.current.updateOptions({\r\n url: window.location.href,\r\n title: document.title,\r\n });\r\n }\r\n}, [pathname]); // re-runs on every client-side route change\r\n```\r\n\r\n---\r\n\r\n## Troubleshooting\r\n\r\n
\r\nMultiple buttons appearing
\r\n\r\n**Cause:** Component re-renders creating duplicate instances\r\n\r\n**Solution:** Use `useRef` to track initialization (already in examples above)\r\n\r\n \r\n\r\n
\r\nButton not appearing
\r\n\r\n**Cause:** Script loads after component renders\r\n\r\n**Solution:** Add null check:\r\n\r\n```jsx\r\nif (window.SocialShareButton) {\r\n new window.SocialShareButton({ container: \"#share-button\" });\r\n}\r\n```\r\n\r\n \r\n\r\n
\r\nModal not opening
\r\n\r\n**Cause:** CSS not loaded or ID mismatch\r\n\r\n**Solution:**\r\n\r\n- Verify CSS CDN link in ``\r\n- Match container ID: `container: '#share-button'` = ` ![\"Social](\"public/socialshare.png\")
\r\n ![\"AOSSIE\"](\"public/aossie_logo.svg\"){kind=logo}
\r\n![\"Telegram](\"https://img.shields.io/badge/Telegram-black?style=flat&logo=telegram&logoColor=white&logoSize=auto&color=24A1DE\"){kind=icon}
![\"X](\"https://img.shields.io/twitter/follow/aossie_org\")
![\"Discord](\"https://img.shields.io/discord/1022871757289422898?style=flat&logo=discord&logoColor=white&logoSize=auto&label=Discord&labelColor=5865F2&color=57F287\")
![\"Medium](\"https://img.shields.io/badge/Medium-black?style=flat&logo=medium&logoColor=black&logoSize=auto&color=white\"){kind=icon}
![\"LinkedIn](\"https://img.shields.io/badge/LinkedIn-black?style=flat&logo=LinkedIn&logoColor=white&logoSize=auto&color=0A66C2\"){kind=icon}
![\"Youtube](\"https://img.shields.io/youtube/channel/subscribers/UCZOG4YhFQdlGaLugr_e5BKw?style=flat&logo=youtube&logoColor=white&logoSize=auto&labelColor=FF0000&color=FF0000\")