[]previous and next page

useHead

Registers head tags for the lifetime of the current owner.

Registers head tags for the lifetime of the current owner. Each registration joins the stack of its identity: title and base are singletons, meta is keyed by its name, property, http-equiv or charset (and media), icons by rel, sizes and type, resource links by rel, href and as, and styles by key. The last registration of an identity wins; disposing it restores the one below. Append-only tags (no identity) all stay. Passing a function re-registers when its dependencies change. On the client the registrations are written to document.head after the render phase of a flush, in one pass per flush. On the server the tags go to the render's head collector (see createServerHead), read once; without one, or outside an owner, nothing is registered.

Import#

ts
import { useHead } from "@shadow-js/web";

Signature#

ts
function useHead(input: HeadInput | (() => HeadInput)): void

Parameters#

Name Description
input One tag, several tags, or a function returning them. null, undefined and false register nothing.

Throws#

  • TypeError for an invalid tag description (see normalizeTags); on the client the error is raised in the registration's render effect and goes to the owner's error handler. In development builds, calling it on the client with no owner does not throw: it warns HEAD_OUTSIDE_OWNER and registers nothing.

Examples#

ts
import { useSignal } from "@shadow-js/core";
import { useHead } from "@shadow-js/web";

function Post() {
  const [post] = useSignal({ title: "Hello" });
  useHead(() => ({ tag: "title", children: `${post().title} | Blog` }));
  return null;
}