@comms-id / website-logo-react
一个React钩子和一个用于通信的成品组件。网站标志图像：网站的标志，在一个固定大小的方框中，以字母作为后退。没有布局变化，访问者的浏览器只接触Comms.ID。React 18或更高版本；这取决于 @comms-id/website-logo 没有别的了。
import { createWebsiteLogoBrowserClient } from "@comms-id/website-logo/browser";
import { WebsiteLogoImage } from "@comms-id/website-logo-react";
const client = createWebsiteLogoBrowserClient({ relayUrl: "/api/comms-id/logo" });
export const Customer = () => <WebsiteLogoImage client={client} site="example.com" size={48} />;
relayUrl 您自己的服务器路由，设置与 @comms-id/relay您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。
图像的作用
- 一个网站: 主机名如
example.com，或URL。立即要求服务；对于空的或无效的站点不要求任何内容。 - 图像 是Comms。中指定的ID副本
resolution.imageUrl，从…api.comms.id(或api-test.comms.id）. 上游logoUrl永远不会被加载：访问者的浏览器只会接触到通信。ID，这样访问者的地址就不会被发送给第三方。回复中提到了其他主机的名字，显示为信件。 - 这个盒子 从第一次渲染开始就有它的大小，所以当图像加载时页面永远不会移动。网站的第一个字母显示在图像加载和没有图像时（服务没有，调用失败，或浏览器无法加载图像）。这个盒子是一个命名的图像(
<site> logo，或者你的alt）。 - 失败的调用永远不会显示为“no logo”：它会触发
comms-id-error（信留在那里）。
您自己的标记： useWebsiteLogo
const logo = useWebsiteLogo({ client, site });
const picture = logo.getImageProps();
return (
<span {...logo.getBoxProps()}>
{logo.state.monogram}
{picture === undefined ? null : <img {...picture} />}
</span>
);
getBoxProps 使该框成为一个命名图像。 getImageProps 在Comms上有图像之前是未定义的。ID主机，携带 referrerPolicy="no-referrer" 以及取回信件的错误处理程序。自己设计盒子的样式：给它一个固定的大小。
组件
道具: client 和 site (要求; site 可能在你不知道的时候没有定义)， alt （默认为“logo”）， size （像素，8到512；默认48）， className， onResult， onFallback （missing， blocked 或者 failed)， onError， extraOrigins （开发主机）。
使用自定义属性对其进行样式化 --comms-id-text， --comms-id-surface， --comms-id-border， --comms-id-radius 或者是 comms-id-website-logo__* 类名。它不需要样式表。它在服务器上呈现相同的框、名称和字母（没有图像：浏览器要求图像）。
您的内容安全策略需要 img-src https://api.comms.id (和 https://api-test.comms.id 对于TEST服务)，而没有其他映像主机。
LICENSE 是消费者客户牌照。 src/ 是由 @comms-id/forge-transformers 而且从来没有手工编辑过。