useDocumentTitle

Custom hook that sets the document title.

Usage

import { useDocumentTitle } from 'vhooks'

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

Installation

pnpm

pnpm dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useDocumentTitle.json -e %src%/hooks

npm

npx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useDocumentTitle.json -e %src%/hooks

bun

bunx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useDocumentTitle.json -e %src%/hooks

yarn

yarn dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useDocumentTitle.json -e %src%/hooks

API

▸ useDocumentTitle(title, options?): void

Custom hook that sets the document title.

Parameters

Name	Type	Description
title	string	The title to set.
options?	UseDocumentTitleOptions	The options.

Returns

void

Type aliases

Ƭ UseDocumentTitleOptions: Object

Hook options.

Type declaration

Name	Type	Description
preserveTitleOnUnmount?	boolean	Whether to keep the title after unmounting the component (default is true).

Hook

import { useRef } from 'react'

import { useIsomorphicLayoutEffect, useUnmount } from 'vhooks'

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