@comms-id/website-logo-react

A React hook and a finished component for the Comms.ID Website logo image: the logo of a website, in a box of a fixed size with a letter as the fallback. No layout shift, and the visitor's browser contacts only Comms.ID. React 18 or later; it depends on @comms-id/website-logo and nothing else.

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 is your own server route, set up with @comms-id/relay: your server signs the call as your registered app, so the browser holds no credential.

What the image does

• A site: a hostname such as example.com, or a URL. The service is asked at once; nothing is asked for an empty or invalid site.
• The image is the Comms.ID copy named in resolution.imageUrl, loaded from api.comms.id (or api-test.comms.id). The upstream logoUrl is never loaded: the visitor's browser contacts only Comms.ID, so a visitor's address is not sent to a third party. A reply that names any other host is shown as the letter.
• The box has its size from the first render, so the page never moves while the image loads. The first letter of the site shows in it while the image loads and when there is no image (the service has none, the call failed, or the browser could not load the image). The box is a named image (<site> logo, or your alt).
• A failed call is never shown as "no logo": it fires comms-id-error (the letter stays).

Your own markup: useWebsiteLogo

const logo = useWebsiteLogo({ client, site });
const picture = logo.getImageProps();
return (
  <span {...logo.getBoxProps()}>
    {logo.state.monogram}
    {picture === undefined ? null : <img {...picture} />}
  </span>
);

getBoxProps makes the box a named image. getImageProps is undefined until there is an image on a Comms.ID host, and carries referrerPolicy="no-referrer" and the error handler that brings back the letter. Style the box yourself: give it a fixed size.

The component

Props: client and site (required; site may be undefined while you do not know it), alt (default " logo"), size (pixels, 8 to 512; default 48), className, onResult, onFallback (missing, blocked or failed), onError, extraOrigins (a development host).

Style it with the custom properties --comms-id-text, --comms-id-surface, --comms-id-border, --comms-id-radius or the comms-id-website-logo__* class names. It needs no stylesheet. It renders on the server with the same box, name and letter (and no image: the image is asked for in the browser).

Your Content-Security-Policy needs img-src https://api.comms.id (and https://api-test.comms.id for the TEST service), and no other image host.

LICENSE is the consumer client licence. src/ is generated by @comms-id/forge-transformers and is never edited by hand.