react-share-on-social
: smiling_face_with_three_hearts:: stuck_out_tongue_winking_eye: money_mouth_face:太阳镜:partying_face:
如果支持原生共享，则提供美丽的备用方案;如果不支持，则提供美丽的备用方案。
一、 ~8kb 轻松的社交媒体分享包，最初来自 反应 - 网络共享.
功能
安装
npm install react-share-on-social
或者，如果你用的是纱线：
yarn add react-share-on-social
使用
传递 linkFavicon prop 大幅改善了使用回退功能的设备的用户体验。 linkFavicon回退反而会产生一个灰色方框。
注意：Web Share API仅在安全上下文中（HTTPS）可用。阅读更多 在这里.
import React from "react";
import ShareOnSocial from "react-share-on-social";
import favicon from "../assets/favicon.png";
const Example = () => {
return (
<ShareOnSocial
textToShare="Check out this new wardrobe I just found from IKEA!"
link="https://ikea.com/wardrobes/kalle"
linkTitle="KALLE Wardorbe which chooses your clothes for you using AI - IKEA"
linkMetaDesc="Stop going through the agony of choosing clothes that fit the weather and your mood."
linkFavicon={favicon}
noReferer
>
<button>Share this product</button>
</ShareOnSocial>
);
};
所需道具
| 财产 | 类型 | 描述 |
|---|---|---|
textToShare | string | 文章中出现的文字。 |
link | URL | 要共享的URL。 |
linkTitle | string | 的链接标题 <title> 标签。 |
linkMetaDesc | string | 链接的元描述，应该对应于 <meta og:description> 标签。 |
linkFavicon | HTMLImageElement | 这是显示在th popup fallback的头一个小的图像。 |
可选道具
| 财产 | 类型 | 默认的 | 描述 |
|---|---|---|---|
shareTo | Array<string> | ["facebook", "twitter", ... , "email"] | 所有应该出现在后备的社交媒体渠道的列表。 |
noReferer | boolean | false | 如果社交媒体按钮应该有一个 noreferrer 不管有没有标签。 |
backdropColor | string | rgba(0,0,0,0.4) | 背景幕布的背景颜色。 |
closeText | string | Close | 关闭按钮的标签。 |
copyToClipboardText | string | Copy to clipboard | “复制到剪贴板” 按钮的标签。 |
copySuccessText | string | Copied | 成功复制后，将副本标签发送至剪贴板按钮。 |
onSocialClick | () => void | () => null | 当用户单击回退中的任何社交媒体按钮时调用的回调。 |
支持社交媒体
支持的道具通过共享URL传递给每个服务，并将出现在post draft中。
| 社交媒体 | 支持的道具 |
―――――――――――――
| Facebook | link |
| Twitter | link， textToShare |
| Whatsapp | link |
| Reddit | link， textToShare |
| LinkedIn | link， linkTitle， textToShare |
| Pinterest | link |
|电报| link， textToShare |
电子邮件 | link， textToShare |
有什么区别？ react-share-on-social 和 react-web-share？
-
回退更丰富的标题和改进的复制到剪贴板的功能
-
道具被重新结构化以提高可用性
-
支持Pinterest
-
社交媒体服务在最小窗口中打开，而不是在新选项卡中打开
贡献
所以你想出力？很好，这个世界需要更多像你这样勇敢的战士。贡献使开源社区成为一个学习、启发和创造的神奇场所。我们和社区都非常感谢您做出的任何贡献。
-
如果你发现一个错字，错误或想要添加一个功能，创建一个问题或添加一个拉取请求与你想要添加的代码!
-
关于bug，请确保您的问题是：
-
可重复的包括重现问题的步骤。
-
具体的包含尽可能多的细节：你使用的设备、你如何与网站互动等。
-
作用域为单个Bug。每个问题对应一个缺陷。
-