/react-share-components

一键分享到各社交平台

Primary LanguageTypeScriptMIT LicenseMIT

react-share-components 👏

Version License: MIT

📖 介绍

一键分享到各社交平台。将原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

👤 作者

🤝 支持

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