React-share-components NPM

📖 介绍

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

🏠 主页

✨ 安装

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