React Social Share Kit

中文文档 | English

A feature-rich React social sharing component library that supports multi-platform sharing and QR code generation.

Features

• 🚀 Support for multiple social platforms (Twitter, Facebook, Reddit, LinkedIn, Telegram, WeChat, etc.)
• 📱 Built-in QR code generation
• 🎨 Customizable styles and icons
• 📋 One-click copy sharing content
• 🌐 Internationalization support
• 📦 TypeScript support
• 🎯 Zero dependencies (except qrcode.react)
• 📱 Responsive design

Installation

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

Quick Start

Basic Usage

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

function App() {
  const shareData = {
    title: 'My Website Title',
    text: 'Check out this awesome content!',
    url: 'https://example.com',
    hashtags: ['react', 'sharing']
  };

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

export default App;

QR Code Component

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

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

API Documentation

SocialShare Component

Props

Property	Type	Default	Description
shareData	ShareData	-	Share data object (required)
platforms	string[]	['twitter', 'facebook', 'reddit', 'wechat']	Social platforms to display
showCopyOptions	boolean	true	Whether to show copy options
showPreview	boolean	true	Whether to show preview
showQRCode	boolean	true	Whether to show QR code (for WeChat sharing)
className	string	''	Custom CSS class name
title	string	-	Component title
description	string	-	Component description
customPlatforms	SocialPlatform[]	[]	Custom platform configurations
onShare	function	-	Share callback function
onCopy	function	-	Copy callback function
texts	object	-	Custom text content

ShareData Type

interface ShareData {
  title?: string;      // Share title
  text?: string;       // Share text
  url?: string;        // Share URL
  hashtags?: string[]; // Hashtags (mainly for Twitter)
}

Supported Platforms

• twitter - Twitter
• facebook - Facebook
• reddit - Reddit
• linkedin - LinkedIn
• telegram - Telegram
• wechat - WeChat (displays QR code)

QRCode Component

Props

Property	Type	Default	Description
text	string	-	Text to encode (required)
size	number	200	QR code size
className	string	''	Custom CSS class name
showDescription	boolean	true	Whether to show description text
level	'L' | 'M' | 'Q' | 'H'	'M'	Error correction level
includeMargin	boolean	true	Whether to include margin
fgColor	string	'#000000'	Foreground color
bgColor	string	'#ffffff'	Background color
descriptionText	string	-	Custom description text
urlPreviewLength	number	50	URL preview length

Advanced Usage

Custom Platforms

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}
/>

Custom Text

const customTexts = {
  shareResults: 'Share Results',
  shareDescription: 'Share your results with others',
  shareOn: 'Share on social media',
  copyOptions: 'Copy options',
  copySummary: 'Copy Summary',
  copyDetailed: 'Copy Detailed',
  copyLink: 'Copy Link',
  preview: 'Preview'
};

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

Event Handling

const handleShare = (platform: string, shareData: ShareData) => {
  console.log(`Shared to ${platform}:`, shareData);
  // Add analytics tracking, etc.
};

const handleCopy = (text: string, type: 'summary' | 'detailed' | 'link') => {
  console.log(`Copied ${type}:`, text);
  // Show success notification, etc.
};

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

Style Customization

The component uses inline styles, but you can override them with CSS class names:

/* Custom container styles */
.my-social-share {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Custom button styles */
.my-social-share button {
  border-radius: 8px;
  font-weight: 600;
}

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

Utility Functions

The library also exports some useful utility functions:

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

// Generate share URLs
const urls = generateShareUrls({
  title: 'Title',
  text: 'Content',
  url: 'https://example.com'
});

// Copy to clipboard
const success = await copyToClipboard('Text to copy');

// Generate share text
const shareText = generateShareText({
  title: 'Title',
  text: 'Content',
  url: 'https://example.com'
});

Browser Support

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

License

MIT License

Contributing

Issues and Pull Requests are welcome!

Changelog

1.0.0

• Initial release
• Support for major social platforms
• Built-in QR code generation
• TypeScript support