# @dhaiwat10/react-link-preview 中文文档

规范地址：https://npmcn.com/package/%40dhaiwat10/react-link-preview/

版本：1\.15\.0
npm 元数据更新时间：2023-01-27T05:59:28.301Z
中文译文更新时间：2026-11-12T06:07:54.297Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dhaiwat10/react-link-preview
原文对照：https://npmcn.com/package/%40dhaiwat10/react-link-preview/?lang=original
项目主页：https://github.com/dhaiwat10/react-link-preview
源码仓库：https://github.com/dhaiwat10/react-link-preview

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

- 包体积（解压后）：42.4 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2021-05-22T11:57:12.337Z
- 最新版本发布：2023-01-27T05:59:28.192Z
- 近 30 天下载量：6553（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 0 个）

## 中文简介

反应库预览链接 .

## 安装

```sh
npm install @dhaiwat10/react-link-preview
```

也可以使用：`pnpm add @dhaiwat10/react-link-preview`、`yarn add @dhaiwat10/react-link-preview`、`bun add @dhaiwat10/react-link-preview`

## README

# 反应链接预览

一个使美丽,完全定制的链接预览的回放组件.

![Demo](https://npmcn.com/package/%40dhaiwat10/react-link-preview/demo.gif) [![Follow @dhaiwat10](https://img.shields.io/twitter/follow/dhaiwat10.svg?label=Follow%20@dhaiwat10) ](https://twitter.com/intent/follow?screen_name=dhaiwat10)[![npm version](https://badge.fury.io/js/%40dhaiwat10%2Freact-link-preview.svg)](https://badge.fury.io/js/%40dhaiwat10%2Freact-link-preview) ![package downloads](https://img.shields.io/npm/dt/@dhaiwat10/react-link-preview) ![CI](https://img.shields.io/github/workflow/status/dhaiwat10/react-link-preview/CI)

[演示](https://codesandbox.io/s/rlp-demo-90e1x?file=/src/App.js)

## 如何使用

**安装软件包 :**

`yarn add @dhaiwat10/react-link-preview`

`npm install @dhaiwat10/react-link-preview`

**导入并渲染预览 :**

```js
import { LinkPreview } from '@dhaiwat10/react-link-preview';

const Home = () => {
  return <LinkPreview url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' width='400px' />;
};
```

如果组件不产生任何结果,则意味着任何元数据都无法被删除用于URL. 提供a `fallback` 组件,如果您不想渲染 `null`。 。 。 .

## 重要

此软件包使用 Heroku [代理( 开源)](https://github.com/dhaiwat10/rlp-proxy) 以了解CORS的问题。 公用代理接收大量流量(+有收分限),不推荐生产使用.

## 建议的工作流程(供制作)

-   请 [叉子代理重播](https://github.com/dhaiwat10/rlp-proxy) 并主持你自己的副本.
-   然后,你可以使用 `customFetcher` 用于通过从中获取数据的获取器函数 __ 代理服务器。 这个 `LinkPreview` 现在将使用您的代理作为数据源。 详见下文.

## API(可操作道具)

你可以将以下道具传递给 `LinkPreview` 组件.

### `url` (弦声)

您想要生成链接预览的 URL .

* * *

### `customFetcher?` (职务)

函数包含 `url` 从代理服务器获取数据( F) 。 该函数应返回一个解决对象的许诺,其结构如下:

```js
{
  title: string | null;
  description: string | null;
  image: string | null;
  siteName: string | null;
  hostname: string | null;
}
```

您可以使用任何数据源,只要您喜欢的 `customFetcher` 函数返回符合上述结构的对象的“承诺”.

[示例](https://npmcn.com/package/%40dhaiwat10/react-link-preview/src/components/LinkPreview/LinkPreview.stories.tsx#L54)

* * *

### `fallback?` (JSX.Element/任何有效的JSX)

如果无法生成链接预览, 则会出现倒置组件 .

* * *

### `fallbackImageSrc` (弦声)

如果找不到 URL 的图像, 则会使用后退图像 rc/ URL .

### `explicitImageSrc` (弦声)

用于图像的 src , 无论数据源返回什么 .

### `showLoader?` (布尔)

是否显示默认装入骨架 .

* * *

### `customLoader?` (JSX.Element/任何有效的JSX)

自定义加载器将显示在默认加载器的位置 .

* * *

### `backgroundColor?` (弦声)

牌的背景颜色 .

* * *

### `primaryTextColor?` (弦声)

主文的颜色(标题).

* * *

### `secondaryTextColor?` (弦声)

二次文本的颜色(描述,URL,域名).

* * *

### `borderColor?` (弦声)

卡片边框的颜色 .

* * *

### `className?` (弦声)

任何您想要申请卡片的自定义 CSS 类.

* * *

### `width?` (字符串或数字)

相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

* * *

### `height?` (字符串或数字)

牌高一丈.

* * *

### `margin?` (字符串或数字)

在卡片上边缘.

* * *

### `descriptionLength?` (数目)

纸牌描述的长度 。 (字符数)

* * *

### `borderRadius?` (字符串或数字)

卡的边界半径.

* * *

### `imageHeight?` (字符串或数字)

图像的高度.

* * *

### `textAlign?` (单位:千美元) _左边_, (中文(简体) ), _对_ 或者说 _中间_(中文(简体) )

文本对齐.

* * *

### `openInNewTab?` (布尔)

打开链接的地方( 新标签或当前标签) .

* * *

### `showPlaceholderIfNoImage?` (布尔)

是否显示占位符图像, 以防无法删除图像 .

* * *

标记为 **? 吗?** 为: **选项**。 。 。 .

## 常见问题

### @dhaiwat10/react-link-preview 是什么？

反应库预览链接 \.

### 如何安装 @dhaiwat10/react-link-preview？

在项目目录运行 npm install @dhaiwat10/react-link-preview，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dhaiwat10/react-link-preview 支持 TypeScript 吗？

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

### @dhaiwat10/react-link-preview 支持 ESM 还是 CommonJS？

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

### @dhaiwat10/react-link-preview 可以商用吗？

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

### @dhaiwat10/react-link-preview 的下载量有多少？

根据 npm 官方下载统计，@dhaiwat10/react-link-preview 在 2026/10/12 – 2026/11/10 这 30 天内被下载 6,553 次，日均约 218 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dhaiwat10/react-link-preview 还在维护吗？

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