---

Custom hook that sets the document title.

Usage

import { useDocumentTitle } from 'usehooks-ts'

export default function Component() {
  useDocumentTitle('foo bar')
}

API

▸ useDocumentTitle(title, options?): void

Custom hook that sets the document title.

Parameters

Returns

void

Type aliases

Ƭ UseDocumentTitleOptions: Object

Hook options.

Type declaration

Hook

import { useRef } from 'react'

import { useIsomorphicLayoutEffect, useUnmount } from 'usehooks-ts'

type UseDocumentTitleOptions = {
  preserveTitleOnUnmount?: boolean
}

export function useDocumentTitle(
  title: string,
  options: UseDocumentTitleOptions = {},
): void {
  const { preserveTitleOnUnmount = true } = options
  const defaultTitle = useRef<string | null>(null)

  useIsomorphicLayoutEffect(() => {
    defaultTitle.current = window.document.title
  }, [])

  useIsomorphicLayoutEffect(() => {
    window.document.title = title
  }, [title])

  useUnmount(() => {
    if (!preserveTitleOnUnmount && defaultTitle.current) {
      window.document.title = defaultTitle.current
    }
  })
}

---