useDocumentTitle


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

NameTypeDescription
titlestringThe title to set.
options?UseDocumentTitleOptionsThe options.

Returns

void

Type aliases

Ƭ UseDocumentTitleOptions: Object

Hook options.

Type declaration

NameTypeDescription
preserveTitleOnUnmount?booleanWhether to keep the title after unmounting the component (default is true).

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  }  }) }