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

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

Previwe (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.