Implementation:Langgenius Dify UseDocumentTitle
| Knowledge Sources | |
|---|---|
| Domains | Frontend, React_Hooks |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
A client-side React hook that sets the browser document title and favicon based on the platform's branding configuration from system features.
Description
useDocumentTitle is a use client hook that reads the global system features (branding settings) and computes the browser tab title and favicon accordingly. When branding is enabled, the title is formatted as {title} - {application_title} and the favicon is set to the branded favicon URL. When branding is disabled, it defaults to {title} - Dify with the standard favicon.ico. The hook waits for system features to finish loading (via useIsSystemFeaturesPending) before applying any changes, preventing flicker. It uses the useTitle and useFavicon hooks from the ahooks library for the actual DOM manipulation. Additionally, it handles apple-touch-icon link elements manually: it removes all existing icon link elements and creates a new apple-touch-icon link when a branded favicon is configured, cleaning up on unmount.
Usage
Use this hook in top-level page components or layouts to set the document title for the current route. It is the standard way to manage browser tab titles throughout the Dify frontend application.
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/hooks/use-document-title.ts
- Lines: 1-44
Signature
export default function useDocumentTitle(title: string): void
Import
import useDocumentTitle from '@/hooks/use-document-title'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| title | string | Yes | The page-specific title segment that will be prefixed before the application name (e.g., Dashboard becomes Dashboard - Dify) |
Outputs
| Name | Type | Description |
|---|---|---|
| (none) | void | This hook does not return a value; it produces side effects on the document title and favicon |
Usage Examples
Setting a Page Title
import useDocumentTitle from '@/hooks/use-document-title'
function DashboardPage() {
useDocumentTitle('Dashboard')
// Browser tab shows: "Dashboard - Dify" (or branded title if branding is enabled)
return <div>Dashboard Content</div>
}
Empty Title (Application Name Only)
import useDocumentTitle from '@/hooks/use-document-title'
function HomePage() {
useDocumentTitle('')
// Browser tab shows: "Dify" (or just the branded application title)
return <div>Home Content</div>
}