Enhancement: Add Solid.js Integration — new wrapper component and demo page section

[coderabbitai]

🎯 Direction

SocialShareButton is a lightweight, zero-dependency, framework-agnostic social sharing component. Solid.js is a highly performant reactive framework with no virtual DOM and minimal runtime overhead — it shares the same philosophy as this library. Since Solid supports SSR (via SolidStart), the wrapper must guard all browser APIs with typeof window !== 'undefined' checks and only mount on the client using onMount.

📹 See the button in action: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

---

📁 Files to Create / Modify

✅ New File: src/social-share-button-solid.jsx

A Solid.js component wrapping the core vanilla JS library, following the same lifecycle pattern as src/social-share-button-react.jsx:

import { onMount, onCleanup, createEffect } from 'solid-js';

export default function SocialShareButton(props) {
  let container;
  let shareButton;

  onMount(() => {
    // SSR guard — SolidStart pre-renders on the server
    if (typeof window !== 'undefined' && window.SocialShareButton) {
      shareButton = new window.SocialShareButton({
        container,
        url:           props.url           || window.location.href,
        title:         props.title         || document.title,
        description:   props.description   || '',
        hashtags:      props.hashtags      || [],
        via:           props.via           || '',
        platforms:     props.platforms     || ['whatsapp','facebook','twitter','linkedin','telegram','reddit'],
        theme:         props.theme         || 'dark',
        buttonText:    props.buttonText    || 'Share',
        customClass:   props.customClass   || '',
        onShare:       props.onShare       || null,
        onCopy:        props.onCopy        || null,
        buttonStyle:   props.buttonStyle   || 'default',
        modalPosition: props.modalPosition || 'center'
      });
    }
  });

  createEffect(() => {
    if (shareButton) {
      shareButton.updateOptions({
        url:           props.url,
        title:         props.title,
        description:   props.description,
        hashtags:      props.hashtags,
        via:           props.via,
        platforms:     props.platforms,
        theme:         props.theme,
        buttonText:    props.buttonText,
        customClass:   props.customClass,
        onShare:       props.onShare,
        onCopy:        props.onCopy,
        buttonStyle:   props.buttonStyle,
        modalPosition: props.modalPosition
      });
    }
  });

  onCleanup(() => {
    if (shareButton) {
      shareButton.destroy();
      shareButton = null;
    }
  });

  return <div ref={container}></div>;
}

---

✅ Existing File: index.html — Add Solid.js Integration Section

Mirror the existing React Integration section. Add a new section with:

• Section heading: ⚡ Solid.js Integration
• Step 1: Include CSS and JS via CDN (same as Quick Start)
• Step 2: Import and use the SocialShareButton component in a Solid.js page

Example code snippet to display:

// App.jsx
import SocialShareButton from './social-share-button-solid';

export default function App() {
  return (
    <SocialShareButton
      url="https://your-website.com"
      title="Check this out!"
      description="An amazing website"
      theme="dark"
      buttonText="Share"
    />
  );
}

---

✅ Acceptance Criteria

• src/social-share-button-solid.jsx created following the React wrapper pattern
• SSR guard (typeof window !== 'undefined') present inside onMount
• onCleanup calls destroy() to prevent memory leaks
• createEffect calls updateOptions() on prop changes
• index.html updated with a Solid.js section containing install + usage code snippets
• Copy-to-clipboard button present on new code blocks in index.html
• README updated to list Solid.js as a supported framework

---

⚠️ Planned — Not Final
This issue represents a planned enhancement and is not guaranteed to be implemented. It may be dropped if it does not align with the repository's direction. Before opening a pull request, please discuss with the maintainers in this issue thread.

[Muneerali199]

Hi @kpj2006 , I would like to work on this issue. I have already opened PRs #73 related to this.
I understand now that I need to:

Communicate via Discord
Get the issue assigned before working
Please assign this issue to me. I'll make sure to follow all the contribution guidelines going forward.
Thank you!