useDocumentTitle

A hook to dynamically update the document title.

Overview

useDocumentTitle sets the document.title property. It's a simple convenience hook for managing the browser tab title in React components.

Demo

Browser API

Title Manager

Type below to update the browser tab title in real-time.

Look up at your tab ↑

API Reference

function useDocumentTitle(title: string): void

Parameters

NameTypeDescription
titlestringThe new document title.

Usage Example

import { useState } from 'react'
import { useDocumentTitle } from 'react-hooks-ts'
 
function Page() {
  const [count, setCount] = useState(0)
  useDocumentTitle(`Count: ${count}`)
 
  return <button onClick={() => setCount(c => c + 1)}>+</button>
}