Skip to main content

​
Overview

Doom provides React hooks for accessing translations, language settings, site overrides, and utility functions. All hooks follow React’s rules of hooks and must be called from React components or custom hooks.

​
Import

import {
  useLang,
  useTranslation,
  useSiteOverrides,
  useIsPrint,
  useInterval,
  useMemoizedFn
} from 'doom'

​
Internationalization Hooks

​
useLang

Returns the current language code. 
export const useLang = () => Language
​
return
Language
Current language: 'en', 'zh', or 'ru'
Example: 
import { useLang } from 'doom'

function MyComponent() {
  const lang = useLang()
  
  return <div>Current language: {lang}</div>
}

​
useTranslation

Returns a function to get translated strings for UI elements. 
export const useTranslation = () => (key: keyof Translation) => string
​
return
function
Function that accepts a translation key and returns the translated string
Example: 
import { useTranslation } from 'doom'

function CollapseButton() {
  const t = useTranslation()
  const [collapsed, setCollapsed] = useState(false)
  
  return (
    <button onClick={() => setCollapsed(!collapsed)}>
      {collapsed ? t('expand_all') : t('collapse_all')}
    </button>
  )
}
Available Translation Keys:
  • collapse_all - “Collapse All”
  • expand_all - “Expand All”
  • download_pdf - “Download PDF”
  • toc - “TOC” (Table of Contents)
  • ai_assistant - “AI Assistant”
  • login / logout - Authentication labels
  • thinking - AI thinking indicator
  • show_more / show_less - Expansion controls
  • view / create / update / delete - CRUD operations
See the Runtime API for the complete list.

​
useSiteOverrides

Returns site-specific overrides for the current language. 
export interface SiteOverridesItem {
  title?: string
  logoText?: string
  terms?: SiteOverridesTerms
}

export const useSiteOverrides = () => SiteOverridesItem
​
return
SiteOverridesItem
Site overrides object containing title, logoText, and terms for current language
Example: 
import { useSiteOverrides } from 'doom'

function SiteTitle() {
  const { title, logoText } = useSiteOverrides()
  
  return (
    <header>
      <span className="logo">{logoText}</span>
      <h1>{title}</h1>
    </header>
  )
}
Site Overrides Configuration: Create an overrides.yaml file in your documentation root: 
title:
  en: My Product Documentation
  zh: 我的产品文档
  ru: Документация моего продукта

logoText:
  en: MyProduct
  zh: 我的产品
  ru: МойПродукт

terms:
  company:
    en: Acme Corp
    zh: Acme 公司
  product:
    en: Acme Platform
    zh: Acme 平台

​
Utility Hooks

​
useIsPrint

Detects if the page is being viewed in print mode or has print query parameter. 
export function useIsPrint() => boolean
​
return
boolean
true if printing or ?print=true query parameter is present
Example: 
import { useIsPrint } from 'doom'

function Navigation() {
  const isPrint = useIsPrint()
  
  if (isPrint) {
    return null // Hide navigation when printing
  }
  
  return <nav>{/* navigation items */}</nav>
}
Print Query Detection: The hook detects:
  • CSS print media query: @media print
  • URL query parameter: ?print=true, ?print=1, ?print=yes
Falsy values: ?print=false, ?print=0, ?print=no

​
useIsPrintQuery

Detects only the print query parameter (not CSS media query). 
export function useIsPrintQuery() => boolean
​
return
boolean
true if ?print=true query parameter is present

​
useIsPrintMedia

Detects only the CSS print media query (not query parameter). 
export function useIsPrintMedia() => boolean
​
return
boolean
true if CSS print media query matches

​
useInterval

Runs a callback function at regular intervals. 
export function useInterval(
  callback: () => void,
  delay?: number | null
) => void
​
callback
() => void
required
Function to call at each interval
​
delay
number | null
Interval delay in milliseconds. Pass null to pause the interval
Example: 
import { useInterval } from 'doom'
import { useState } from 'react'

function Timer() {
  const [seconds, setSeconds] = useState(0)
  const [isRunning, setIsRunning] = useState(true)
  
  useInterval(
    () => setSeconds(s => s + 1),
    isRunning ? 1000 : null
  )
  
  return (
    <div>
      <div>Elapsed: {seconds}s</div>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? 'Pause' : 'Resume'}
      </button>
    </div>
  )
}
Features:
  • Automatically cleans up on unmount
  • Updates callback without restarting interval
  • Pause/resume by passing null as delay

​
useMemoizedFn

Creates a memoized function that always uses the latest function reference. 
export const useMemoizedFn = <T extends (...args: any[]) => any>(
  fn: T
) => T
​
fn
Function
required
Function to memoize
​
return
Function
Memoized version of the function with stable reference
Example: 
import { useMemoizedFn } from 'doom'
import { useState, useEffect } from 'react'

function SearchComponent() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  
  // Function reference remains stable across re-renders
  const search = useMemoizedFn(async (q: string) => {
    const data = await fetch(`/api/search?q=${q}`)
    const results = await data.json()
    setResults(results)
  })
  
  useEffect(() => {
    if (query) {
      search(query)
    }
  }, [query]) // 'search' doesn't cause re-runs
  
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <Results items={results} />
    </div>
  )
}
Use Cases:
  • Callbacks passed to child components
  • Functions used in useEffect dependencies
  • Event handlers that reference state
  • Performance optimization

​
Advanced Usage

​
Combining Hooks

import { useLang, useTranslation, useSiteOverrides } from 'doom'

function LocalizedHeader() {
  const lang = useLang()
  const t = useTranslation()
  const { title, terms } = useSiteOverrides()
  
  return (
    <header>
      <h1>{title || terms?.product}</h1>
      <span className="lang">Language: {lang}</span>
      <button>{t('download_pdf')}</button>
    </header>
  )
}

​
Custom Hooks

Build custom hooks using Doom’s hooks: 
import { useLang, useSiteOverrides } from 'doom'

function useLocalizedTerm(termName: string) {
  const lang = useLang()
  const { terms } = useSiteOverrides()
  
  return terms?.[termName] || termName
}

// Usage
function MyComponent() {
  const productName = useLocalizedTerm('product')
  return <div>Welcome to {productName}</div>
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us