反应链接预览
一个使美丽,完全定制的链接预览的回放组件.
如何使用
安装软件包 :
yarn add @dhaiwat10/react-link-preview
npm install @dhaiwat10/react-link-preview
导入并渲染预览 :
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 代理( 开源) 以了解CORS的问题。 公用代理接收大量流量(+有收分限),不推荐生产使用.
建议的工作流程(供制作)
- 请 叉子代理重播 并主持你自己的副本.
- 然后,你可以使用
customFetcher用于通过从中获取数据的获取器函数 代理服务器。 这个LinkPreview现在将使用您的代理作为数据源。 详见下文.
API(可操作道具)
你可以将以下道具传递给 LinkPreview 组件.
url (弦声)
您想要生成链接预览的 URL .
customFetcher? (职务)
函数包含 url 从代理服务器获取数据( F) 。 该函数应返回一个解决对象的许诺,其结构如下:
{
title: string | null;
description: string | null;
image: string | null;
siteName: string | null;
hostname: string | null;
}
您可以使用任何数据源,只要您喜欢的 customFetcher 函数返回符合上述结构的对象的“承诺”.
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? (布尔)
是否显示占位符图像, 以防无法删除图像 .
标记为 ? 吗? 为: 选项。 。 。 .