React Social Share Kit


中文 | English

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

特性

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



安装

``bash
npm install react-social-share-kit


或

yarn add react-social-share-kit

或

pnpm add react-social-share-kit
`

快速开始

$3

`tsx
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 (


);
}

export default App;
`

$3

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

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

API 文档

$3

#### 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 类型

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

#### 支持的平台

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

$3

#### 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 预览长度 |

高级用法

$3

`tsx
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'
}
];

shareData={shareData}
customPlatforms={customPlatforms}
/>
`

$3

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

shareData={shareData}
texts={customTexts}
/>
`

$3

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

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

shareData={shareData}
onShare={handleShare}
onCopy={handleCopy}
/>
`

样式自定义

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

`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;
}
`

`tsx
shareData={shareData}
className="my-social-share"
/>
`

工具函数

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

`tsx
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！

更新日志

$3

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