React Social Share Kit

中文 | English

一个功能丰富的 React 社交分享组件库，支持多平台分享和二维码生成。

特性

• 🚀 支持多个社交平台（Twitter、Facebook、Reddit、LinkedIn、Telegram、微信等）
• 📱 内置二维码生成功能
• 🎨 可自定义样式和图标
• 📋 一键复制分享内容
• 🌐 支持国际化
• 📦 TypeScript 支持
• 🎯 零依赖（除了 qrcode.react）
• 📱 响应式设计

安装

npm install react-social-share-kit
# 或
yarn add react-social-share-kit
# 或
pnpm add react-social-share-kit

快速开始

基础用法

import React from 'react';
import { SocialShare } from 'react-social-share-kit';

function App() {
  const shareData = {
    title: '我的网站标题',
    text: '查看这个很棒的内容！',
    url: 'https://example.com',
    hashtags: ['react', 'sharing']
  };

  return (
    <div>
      <SocialShare shareData={shareData} />
    </div>
  );
}

export default App;

二维码组件

import React from 'react';
import { QRCode } from 'react-social-share-kit';

function MyQRCode() {
  return (
    <QRCode 
      text="https://example.com"
      size={200}
      showDescription={true}
    />
  );
}

API 文档

SocialShare 组件

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | shareData | ShareData | - | 分享数据对象（必需） | | platforms | string[] | ['twitter', 'facebook', 'reddit', 'wechat'] | 要显示的社交平台 | | showCopyOptions | boolean | true | 是否显示复制选项 | | showPreview | boolean | true | 是否显示预览 | | showQRCode | boolean | true | 是否显示二维码（微信分享时） | | className | string | '' | 自定义 CSS 类名 | | title | string | - | 组件标题 | | description | string | - | 组件描述 | | customPlatforms | SocialPlatform[] | [] | 自定义平台配置 | | onShare | function | - | 分享回调函数 | | onCopy | function | - | 复制回调函数 | | texts | object | - | 自定义文本内容 |

ShareData 类型

interface ShareData {
  title?: string;      // 分享标题
  text?: string;       // 分享文本
  url?: string;        // 分享链接
  hashtags?: string[]; // 标签（主要用于 Twitter）
}

支持的平台

• twitter - Twitter
• facebook - Facebook
• reddit - Reddit
• linkedin - LinkedIn
• telegram - Telegram
• wechat - 微信（显示二维码）

QRCode 组件

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | text | string | - | 要编码的文本（必需） | | size | number | 200 | 二维码尺寸 | | className | string | '' | 自定义 CSS 类名 | | showDescription | boolean | true | 是否显示描述文本 | | level | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | 错误纠正级别 | | includeMargin | boolean | true | 是否包含边距 | | fgColor | string | '#000000' | 前景色 | | bgColor | string | '#ffffff' | 背景色 | | descriptionText | string | - | 自定义描述文本 | | urlPreviewLength | number | 50 | URL 预览长度 |

高级用法

自定义平台

import { SocialShare, TwitterIcon } from 'react-social-share-kit';

const customPlatforms = [
  {
    name: 'Custom Platform',
    icon: TwitterIcon,
    url: 'https://custom-platform.com/share?url=YOUR_URL',
    color: '#ff6b6b'
  }
];

<SocialShare 
  shareData={shareData}
  customPlatforms={customPlatforms}
/>

自定义文本

const customTexts = {
  shareResults: '分享结果',
  shareDescription: '与他人分享您的结果',
  shareOn: '分享到社交媒体',
  copyOptions: '复制选项',
  copySummary: '复制摘要',
  copyDetailed: '复制详细信息',
  copyLink: '复制链接',
  preview: '预览'
};

<SocialShare 
  shareData={shareData}
  texts={customTexts}
/>

事件处理

const handleShare = (platform: string, shareData: ShareData) => {
  console.log(`分享到 ${platform}:`, shareData);
  // 添加分析跟踪等
};

const handleCopy = (text: string, type: 'summary' | 'detailed' | 'link') => {
  console.log(`复制了 ${type}:`, text);
  // 显示成功提示等
};

<SocialShare 
  shareData={shareData}
  onShare={handleShare}
  onCopy={handleCopy}
/>

样式自定义

组件使用内联样式，但您可以通过 CSS 类名进行覆盖：

/* 自定义容器样式 */
.my-social-share {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 自定义按钮样式 */
.my-social-share button {
  border-radius: 8px;
  font-weight: 600;
}

<SocialShare 
  shareData={shareData}
  className="my-social-share"
/>

工具函数

库还导出了一些有用的工具函数：

import { 
  generateShareUrls, 
  copyToClipboard, 
  generateShareText 
} from 'react-social-share-kit';

// 生成分享链接
const urls = generateShareUrls({
  title: '标题',
  text: '内容',
  url: 'https://example.com'
});

// 复制到剪贴板
const success = await copyToClipboard('要复制的文本');

// 生成分享文本
const shareText = generateShareText({
  title: '标题',
  text: '内容',
  url: 'https://example.com'
});

浏览器支持

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

• 初始版本发布
• 支持主要社交平台分享
• 内置二维码生成
• TypeScript 支持