useHead()

Reactively manage the document’s title, meta tags, and link tags. Call from inside a component() setup. Tags are automatically removed when the component unmounts.

Signature

function useHead(config: HeadConfig): void;

interface HeadConfig {
  title?: string | (() => string);
  meta?: Record<string, string | (() => string)>[];
  link?: Record<string, string>[];
}

Parameters

Field	Type	Description
`title`	`string \| (() => string)`	Document title. Pass a function for reactive titles
`meta`	`Record<string, string \| (() => string)>[]`	Array of meta-tag attribute bags (values can be reactive)
`link`	`Record<string, string>[]`	Array of link-tag attribute bags

Cleanup

Each reactive title / meta value registers a cleanup that runs on component unmount, removing the tag from <head> and disposing the effect. No manual cleanup needed.

Examples

import { signal, useHead, component, div, h1 } from "@whisq/core";

const page = signal("Home");
const desc = signal("The AI-native framework");

const Page = component(() => {
  useHead({
    title: () => `${page.value} — Whisq`,
    meta: [
      { name: "description", content: () => desc.value },
      { property: "og:title",       content: () => page.value },
      { property: "og:description", content: () => desc.value },
    ],
    link: [{ rel: "canonical", href: "https://whisq.dev/" }],
  });

  return div(h1(() => page.value));
});

Updating page.value or desc.value flips <title> and the reactive meta attributes in place — no DOM rewiring, just an effect() per reactive value.

Constraint

Must be called during a component’s synchronous setup. Calling it outside component() (top-level, inside an effect, after an await) throws.