Enhancement: Add Remix Integration — demo page section and SSR-safe usage guide

[coderabbitai]

🎯 Direction

SocialShareButton is a lightweight, zero-dependency, framework-agnostic social sharing component. Remix is a full-stack React framework built on web standards with a strong SSR-first model. Since Remix always server-renders, the library must only initialize inside a useEffect hook and all browser APIs must be guarded. Unlike Next.js App Router, Remix has no 'use client' directive — client-side code runs exclusively inside useEffect.

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

---

📁 Files to Create / Modify

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

A Remix-compatible React component that safely wraps the vanilla JS library:

import { useEffect, useRef } from 'react';

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'
}) {
  const containerRef = useRef(null);
  const shareButtonRef = useRef(null);

  useEffect(() => {
    // SSR guard — Remix always server-renders; browser APIs only available here
    if (typeof window !== 'undefined' && window.SocialShareButton) {
      shareButtonRef.current = new window.SocialShareButton({
        container: containerRef.current,
        url:   url   || window.location.href,
        title: title || document.title,
        description, hashtags, via, platforms,
        theme, buttonText, customClass,
        onShare, onCopy, buttonStyle, modalPosition
      });
    }
    return () => {
      if (shareButtonRef.current) {
        shareButtonRef.current.destroy();
        shareButtonRef.current = null;
      }
    };
  }, []);

  useEffect(() => {
    if (shareButtonRef.current) {
      shareButtonRef.current.updateOptions({
        url, title, description, hashtags, via, platforms,
        theme, buttonText, customClass, onShare, onCopy,
        buttonStyle, modalPosition
      });
    }
  }, [url, title, description, hashtags, via, platforms,
      theme, buttonText, customClass, onShare, onCopy,
      buttonStyle, modalPosition]);

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

---

✅ Existing File: index.html — Add Remix Integration Section

Add a new section with:

• Section heading: 🎸 Remix Integration
• Step 1: Include CSS via links export and JS via CDN <script> in root.tsx
• Step 2: Import and use the component in a Remix route

Example code snippet to display:

// 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"
    />
  );
}

---

✅ Acceptance Criteria

• src/social-share-button-remix.jsx created using React hooks compatible with Remix
• Initialization inside useEffect with SSR guard (typeof window !== 'undefined')
• Cleanup destroy() called in useEffect return function
• Second useEffect calls updateOptions() on prop changes
• index.html updated with a Remix section containing install + usage code snippets
• Copy-to-clipboard button present on new code blocks in index.html
• README updated to list Remix 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]

I've implemented this in PR #110. The component wraps all browser-API calls inside with an SSR guard, calls on unmount, and uses a second effect for on prop changes. The demo section and README have both been updated.