react-use-title

A lightweight and customizable React hook for managing document titles with support for prefixes, suffixes, custom separators, title restoration, and page visibility changes.

Features

• 🚀 Lightweight and easy to use
• ⚛️ Built for React 18 and React 19
• 📝 Set the document title with a simple API
• 🔖 Add custom prefixes and suffixes
• ✨ Customize the separator between title parts
• 🔄 Restore the previous title on unmount
• 👀 Change the title when the page becomes hidden
• 💙 Fully written in TypeScript

Installation

npm install react-use-title

Usage

1. Basic:

export default function App() {
  useTitle("Dashboard")
  return <h1>react-use-title</h1>;
}

Preview

---

2. Prefix:

export default function App() {
  useTitle("Dashboard",{
    prefix:"Admin"
  })
  return <h1>react-use-title</h1>;
}

Preview

---

3. Suffix:

export default function App() {
  useTitle("Dashboard",{
    suffix:"My App"
  })
  return <h1>react-use-title</h1>;
}

Preview

---

4. separator

export default function App() {
  useTitle("Dashboard",{
    prefix:"Admin",
    suffix:"My App",
    separator:"😍"
  })
  return <h1>react-use-title</h1>;
}

Preview

Default

Using Separator

---

5. onHidden

export default function App() {
  useTitle("Dashboard",{
    prefix:"Admin",
    suffix:"My App",
    separator:"😍",
    onHidden:{title:"Why Did You Leave? 😐"}
  })
  return <h1>react-use-title</h1>;
}

Preview

Note: GIF may take a few seconds to load.

API

useTitle

useTitle(title: string, options?: UseTitleOptions): void

Parameters

Parameter	Type	Description
title	string	The document title.
options	UseTitleOptions	Optional configuration object.

UseTitleOptions

Option	Type	Default	Description
prefix	string	undefined	Adds text before the title.
suffix	string	undefined	Adds text after the title.
separator	string	"|" (Pipe)	Separator between title parts.
restoreOnUnmount	boolean	false	Restores the previous document title when the component unmounts.
onHidden	{ title: string }	undefined	Changes the document title when the page becomes hidden.

License

This project is licensed under the MIT License. See the LICENSE file for details.