react-share-components 👏

📖 介绍

一键分享到各社交平台。将原share.js封装了一个 react 版本。

🏠 主页

demo

✨ 安装

yarn add react-share-components
 
or
 
npm install react-share-components

💻 使用

import React from 'react';
import ReactDOM from 'react-dom';
import ReactShareComponents from 'react-share-components';
import 'react-share-components/dist/react-share-components.css'
 
const MyComponent = () => {
  return (
    <ReactShareComponents
      sites={[
        'weibo',
        'qq',
        'wechat',
        'douban',
        'qzone',
        'linkedin',
        'facebook',
        'twitter',
        'google',
      ]}
      url="https://github.com/liuguanhua/react-share-components"
      title="react-share-components"
      description="一键分享到各社交平台"
    />
  );
};
 
ReactDOM.render(<MyComponent />, document.body);

参数：

属性	类型	默认值
url	string	window.location.href
title	string	读取head标签<meta name="title" content="react-share-components" />或document.title的内容
description	string	读取head标签<meta name="description" content="一键分享到各社交平台" />的内容
source	string	读取head标签<meta name="site" content="https://github.com/liuguanhua/react-share-components" />的内容
image	string	读取第一个 img 标签地址
sites	("weibo" | "qq" | "wechat" | "douban" | "qzone" | "linkedin" | "facebook" | "twitter" | "google")[]	["weibo","qq","wechat","douban","qzone","linkedin", "facebook","twitter","google"]
disabled	("weibo" | "qq" | "wechat" | "douban" | "qzone" | "linkedin" | "facebook" | "twitter" | "google")[]	[]
wechatQrcodeTitle	ReactNode	微信扫一扫：分享
wechatQrcodeHelper	ReactNode	<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>
wechatQrcodeProps	QRCode	{size:100}

⌨️ 本地开发

下载：git clone https://github.com/liuguanhua/react-share-components.git
 
开发：
    cd react-share-components
    yarn install
    yarn start
 
预览：
    cd example
    yarn install
    yarn start
    http://localhost:1234

😊 感谢

share.js

👤 作者

• 个人主页: liuguanhua.github.io
• Github:@liuguanhua

🤝 支持

有什么好的想法、建议、问题和功能需求，欢迎 👋 提出。如果觉得这个项目不错或者对您有帮助，👏 赞一 个 ⭐️❤️！