Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProSet document.title from a component, and restore the previous title when it unmounts, so each view of a single-page app names itself.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in a client-rendered view or a state-driven screen where the title should change with the content: an unread count, the open conversation or the current step.
Do not use it in a framework that has a metadata API for routes (like the Next.js metadata export); use that for the route title, and this hook only for live changes.
import { useDocumentTitle } from "@/hooks/use-document-title"useDocumentTitle(unread > 0 ? `(${unread}) Inbox` : "Inbox")useDocumentTitle(title: string, options?): void
| Option | Type | Default | Description |
|---|---|---|---|
restoreOnUnmount | boolean | true | Put the previous title back when unmounting. |
The title is set in an effect, so it never runs on the server. Several components can use it; the last one mounted wins and, with restore on, each one hands back the title it replaced.
The page title is the first thing a screen reader announces after a navigation and is how people tell tabs apart (WCAG 2.4.2). Make it specific, with the most unique part first, and update it when the view changes.
The hook ships with renderHook tests (use-document-title.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.