@quantabit/social-links-sdk

Universal social links & contact widget for any platform — with QR code hover support

✨ Features

• 30+ Platforms — X, Discord, Telegram, WhatsApp, WeChat, GitHub, YouTube, TikTok, Reddit, LinkedIn, and more
• QR Code Hover — Mouse hover to show QR code for easy mobile scanning
• 4 Layout Components — Bar, Floating Widget, Footer, and individual Link Item
• 3 Themes — Dark, Light, and Glassmorphism
• Zero Dependencies — QR code generation via free API, no extra npm packages
• Custom Platforms — Bring your own icons and URL templates
• Multi-language — English, Chinese, Japanese, Korean
• Analytics Ready — Built-in click tracking hook

📦 Installation

npm install @quantabit/social-links-sdk

🚀 Quick Start

Social Links Bar (most common)

import { SocialLinksBar } from "@quantabit/social-links-sdk";
import "@quantabit/social-links-sdk/styles.css";

function App() {
  const links = [
    { platform: "x", handle: "quantabit" },
    { platform: "discord", handle: "qbit-community" },
    { platform: "telegram", handle: "quantabit_official" },
    { platform: "github", handle: "quantabit-chain" },
    { platform: "wechat", qrImage: "/images/wechat-qr.png" },
    { platform: "email", handle: "[email protected]" },
  ];

  return <SocialLinksBar links={links} showQR={true} size="medium" />;
}

Floating Contact Widget

import { FloatingContactWidget } from "@quantabit/social-links-sdk";

<FloatingContactWidget
  links={[
    { platform: "telegram", handle: "quantabit_support" },
    { platform: "discord", handle: "qbit-community" },
    { platform: "whatsapp", handle: "1234567890" },
    { platform: "email", handle: "[email protected]" },
  ]}
  position="bottom-right"
  theme="dark"
  expandDirection="up"
/>;

Footer Contact Section

import { ContactFooter } from "@quantabit/social-links-sdk";

<ContactFooter
  title="Find Us"
  groups={[
    {
      title: "Social",
      links: [
        { platform: "x", handle: "quantabit" },
        { platform: "instagram", handle: "quantabit" },
      ],
    },
    {
      title: "Community",
      links: [
        { platform: "discord", handle: "qbit-community" },
        { platform: "telegram", handle: "quantabit_official" },
      ],
    },
  ]}
  theme="dark"
/>;

Custom QR Code (e.g., WeChat)

import { SocialLinkItem } from "@quantabit/social-links-sdk";

<SocialLinkItem
  platform="wechat"
  customQR="/images/my-wechat-qr.png"
  showQR={true}
  showLabel={true}
  language="zh"
/>;

🎨 Supported Platforms

| Category | Platforms | | --------- | ----------------------------------------------------------- | | Social | X (Twitter), Facebook, Instagram, Reddit, Pinterest, TikTok | | Messaging | Telegram, Discord, WhatsApp, WeChat, LINE, Signal | | Video | YouTube, Twitch, Bilibili | | Developer | GitHub, GitLab | | Business | LinkedIn, Medium | | Web3 | OpenSea | | Other | Email, Phone, Website, Map |

🔧 Hook: useSocialLinks

import { useSocialLinks } from "@quantabit/social-links-sdk";

function MyComponent() {
  const { links, addLink, removeLink, clickStats, getByCategory, categories } =
    useSocialLinks([{ platform: "x", handle: "quantabit" }]);

  // Dynamic management
  addLink("discord", "my-server");
  const socials = getByCategory(categories.SOCIAL);
}

🛠️ QR Code Utilities

import { generateQRCodeUrl, preloadQRCodes } from "@quantabit/social-links-sdk";

// Generate QR code URL
const qrUrl = generateQRCodeUrl("https://t.me/quantabit", { size: 200 });

// Preload for instant display
preloadQRCodes(["https://t.me/quantabit", "https://discord.gg/invite"]);

📐 API Reference

SocialLinksBar Props

| Prop | Type | Default | Description | | ------------ | -------------------------------- | -------------- | ---------------------------- | | links | LinkConfig[] | [] | Array of link configurations | | direction | 'horizontal' \| 'vertical' | 'horizontal' | Layout direction | | size | 'small' \| 'medium' \| 'large' | 'medium' | Icon size | | showQR | boolean | true | Show QR on hover | | showLabels | boolean | false | Show text labels | | colorMode | 'brand' \| 'mono' | 'brand' | Icon coloring | | gap | number | 8 | Spacing between items (px) | | language | string | 'en' | Language code | | maxItems | number | - | Max visible items |

LinkConfig

{
  platform: string;      // Platform ID (e.g., 'x', 'telegram')
  handle?: string;       // Username or identifier
  url?: string;          // Custom URL (overrides template)
  qrImage?: string;      // Custom QR code image path
  label?: string;        // Custom display name
  tooltip?: string;      // Custom tooltip text
  showQR?: boolean;      // Override showQR per-item
}

📄 License

MIT © QuantaBit Team

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback