context pagetitle

PageTitle Context

The PageTitle Context provides a simple way to manage and update the current page title across your React application. It is useful for setting the document title or displaying the current page name in headers, breadcrumbs, or other UI elements.

Usage

Provider

Wrap your application (or a subtree) with the PageTitleProvider to enable access to the page title context:

import { PageTitleProvider } from 'src/context/pageTitle/PageTitleProvider';

<PageTitleProvider>
  {/* your app components */}
</PageTitleProvider>

Hook

Use the usePageTitle hook to access and update the page title from any component within the provider:

import { usePageTitle } from 'src/context/pageTitle/usePageTitle';

const { pageTitle, setPageTitle } = usePageTitle();

// Read the current title
console.log(pageTitle);

// Update the title
setPageTitle('Dashboard');

API

usePageTitle()

Returns an object with:

• pageTitle: string — The current page title.
• setPageTitle: (title: string) => void — Function to update the page title.

Example

import { usePageTitle } from 'src/context/pageTitle/usePageTitle';

function Dashboard() {
  const { setPageTitle } = usePageTitle();

  React.useEffect(() => {
    setPageTitle('Dashboard');
  }, [setPageTitle]);

  return <h1>Dashboard</h1>;
}

When to Use

• To display or update the current page title in your app's UI.
• To synchronize the document title with navigation.
• To provide a consistent way for nested components to update the page title.

---

See also:

• Contexts & Hooks Overview
• Layout Context
• Preference Context
• Theme Context