# -adisagar2003-react-share-on-social 中文文档

规范地址：https://npmcn.com/package/-adisagar2003-react-share-on-social/

版本：1\.0\.9
npm 元数据更新时间：2022-11-02T01:10:54.029Z
中文译文更新时间：2026-10-31T09:47:02.011Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/-adisagar2003-react-share-on-social
原文对照：https://npmcn.com/package/-adisagar2003-react-share-on-social/?lang=original
项目主页：https://github.com/sakerhetspolisen/react-share-on-social#readme
源码仓库：https://github.com/sakerhetspolisen/react-share-on-social

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：340 kB，35 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=17
- 首次发布：2022-11-02T01:10:53.730Z
- 最新版本发布：2022-11-02T01:10:53.904Z
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

如果支持，使用Web共享API的本机共享，如果不支持，一个美丽的回退。

## 安装

```sh
npm install -- -adisagar2003-react-share-on-social
```

也可以使用：`pnpm add -- -adisagar2003-react-share-on-social`、`yarn add -- -adisagar2003-react-share-on-social`、`bun add -- -adisagar2003-react-share-on-social`

## README

# react-share-on-social

: smiling\_face\_with\_three\_hearts:: stuck\_out\_tongue\_winking\_eye: money\_mouth\_face:太阳镜:partying\_face:

**如果支持原生共享，则提供美丽的备用方案;如果不支持，则提供美丽的备用方案。**

一、 `~8kb` 轻松的社交媒体分享包，最初来自 [反应 - 网络共享](https://www.npmjs.com/package/react-web-share).

![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-share-on-social) ![Maintenance](https://img.shields.io/maintenance/yes/2022) ![npm](https://img.shields.io/npm/v/react-share-on-social) ![NPM](https://img.shields.io/npm/l/react-share-on-social)

### [演示](https://yhn9h.csb.app/)

通过❤︎增强 [卡尔·塞勒格伦](https://github.com/sakerhetspolisen),最初由 [严厉的Zalavadiya](https://github.com/harshzalavadiya).

![react-share-on-social fallback preview](https://user-images.githubusercontent.com/68159964/153582195-e71d6a9a-6109-4d62-8f2f-4aafefe64675.png)

## 功能

-   使用 [Web共享API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) 用于 [支持的浏览器](https://caniuse.com/web-share)
-   复制到剪贴板功能使用 [复制到剪贴板](https://www.npmjs.com/package/copy-to-clipboard)
-   用途 [反应门户](https://reactjs.org/docs/portals.html) 在父DOM层次结构之外呈现组件

## 安装

```bash
npm install react-share-on-social
```

或者，如果你用的是纱线：

```bash
yarn add react-share-on-social
```

## 使用

传递 `linkFavicon` prop 大幅改善了使用回退功能的设备的用户体验。 `linkFavicon`回退反而会产生一个灰色方框。

> 注意：Web Share API仅在安全上下文中（HTTPS）可用。阅读更多 [在这里](https://www.w3.org/TR/web-share/#security-and-privacy-considerations).

```js
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_。每个问题对应一个缺陷。
        

## 许可证

[麻省理工学院](https://tldrlegal.com/license/mit-license)

## 常见问题

### -adisagar2003-react-share-on-social 是什么？

如果支持，使用Web共享API的本机共享，如果不支持，一个美丽的回退。

### 如何安装 -adisagar2003-react-share-on-social？

在项目目录运行 npm install -- -adisagar2003-react-share-on-social，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### -adisagar2003-react-share-on-social 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### -adisagar2003-react-share-on-social 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### -adisagar2003-react-share-on-social 可以商用吗？

-adisagar2003-react-share-on-social 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### -adisagar2003-react-share-on-social 还在维护吗？

最新版本 1\.0\.9 发布于 2022/11/02（4 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/11/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。