Skip to main content
Programmatically updates document.title and restores the original title on unmount.

​
Usage

import { useDocumentTitle } from '@kivora/react';

function ProfilePage({ username }) {
  useDocumentTitle(`${username} | Kivora`);

  return <div>{/* Profile content */}</div>;
}

​
Parameters

​
title
string
required
The title string to set.
​
revertOnUnmount
boolean
default:"true"
Whether to revert to the previous title when the component unmounts.

​
Examples

​
Dynamic page title

function ArticlePage({ article }) {
  useDocumentTitle(article.title);

  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </article>
  );
}

​
Without revert on unmount

function CheckoutPage() {
  useDocumentTitle('Checkout | Store', false);

  return <div>{/* Checkout form */}</div>;
}

​
Notification count

function Inbox({ unreadCount }) {
  const title = unreadCount > 0 
    ? `(${unreadCount}) Inbox | Mail`
    : 'Inbox | Mail';
  
  useDocumentTitle(title);

  return <div>{/* Inbox content */}</div>;
}

​
Route-based titles

function Dashboard() {
  const location = useLocation();

  const titles = {
    '/dashboard': 'Dashboard',
    '/dashboard/settings': 'Settings',
    '/dashboard/profile': 'Profile',
  };

  useDocumentTitle(titles[location.pathname] || 'Dashboard');

  return <Outlet />;
}

​
Loading state

function DataPage() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useDocumentTitle(
    loading ? 'Loading...' : `${data.name} | App`
  );

  return <div>{/* Content */}</div>;
}

​
Notes

  • Automatically saves the previous title when the component mounts
  • Restores the original title on unmount (unless revertOnUnmount is false)
  • Updates the title whenever the title parameter changes

​
Type Definitions

function useDocumentTitle(
  title: string,
  revertOnUnmount?: boolean
): void;

Build docs developers (and LLMs) love

Get started for freeTalk to us