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

## 🎯 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:

```jsx
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

;
}
```

---

### ✅ 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 `` in `root.tsx`
- Step 2: Import and use the component in a Remix route

Example code snippet to display:

```jsx
// 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.**