DocumentTitleHandler - Trying to change the page title from Refine to different names

[tichitaun]

Hi, I am currently trying to make some sort of website and I want to modify the name I've made a customTitleHandler.tsx script but it just changes for one second to the default of that and then back to refine here's the code that I have:

This is the app.tsx
<Refine

          dataProvider={dataProvider}
          liveProvider={liveProvider}
          notificationProvider={useNotificationProvider}
          routerProvider={routerBindings}
          authProvider={authProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
            useNewQueryKeys: true,
            projectId: "7O3d0U-SdJaDJ-PGBYzU",
            liveMode: "auto",
          }}
        >
          <DocumentTitleHandler handler={customTitleHandler } />
          <Routes>
            <Route path="/kanban-board-home" element={<KanbanBoardHome />} />
            <Route path="/register" element={<Register />} />
            <Route path="/login" element={<Login />} />
            <Route path="/forgot-password" element={<ForgotPassword />} />
          </Routes>

this is the customTitleHander.tsx
import { IResourceItem, Action } from "@refinedev/core";

interface TitleHandlerOptions {
resource?: IResourceItem;
action?: Action;
params?: Record<string, string | undefined>;
pathname?: string;
}

export const customTitleHandler = ({
pathname
}: TitleHandlerOptions) => {
// Default title
let title = "Michiduta's Playground";
// Custom title logic
if (pathname) {
if (pathname === "/login") {
title = "Login Page";
} else if (pathname === "/register") {
title = "Register Page";
} else if (pathname === "/forgot-password") {
title = "Reset Password Page";
} else if (pathname === "/kanban-board-home") {
title = "Kanban Board";
}
}

return title;
};

This is the index.tsx

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

// Set the document title
document.title = "Michiduta's Playground"; // Set the default title here

const container = document.getElementById("root") as HTMLElement;
const root = createRoot(container);

root.render(
<React.StrictMode>

</React.StrictMode>
);

[alexnguyennz]

For the non resource pages like login, it may be easier to use useDocumentTitle.

[Villva-vinoth]

is there any one able to get expected output

[BatuhanW]

Hey folks, could you create an issue about this one, ideally with a minimal reproducible example?

[Villva-vinoth]

hey Hi @BatuhanW, according to the docs , its not working could you able to guide ? to resolve this.

[bdeterling]

I've seen this behavior and have tried all the suggestions (TitleUpdater, DocumentTitleHandler). I believe DocumentTitleHandler should work, but it seems like it's instantiated multiple times (maybe on every page), so even if you use it under BrowserRouter or Refine, it doesn't always use your custom handler.

After getting nowhere with the official solution, I found a work-around.

First, if you're using translation, then you can just change the translation for the keydocumentTitle.suffix. I don't need translation so I just added this code to override the translation for that one field:

const translationOverrides: Record<string, string> = {
  'documentTitle.suffix': ' | MyApp',
};

const i18nProvider: I18nProvider = {
  translate: (key: string, options?: never, defaultMessage?: string) => translationOverrides[key] ?? defaultMessage,
  changeLocale: () => null,
  getLocale: () => 'en',
  ...
  <Refine i18nProvider={i18nProvider}...
};

That leaves everything else alone, but translates that one field, and if you discover similar ones, you can override them too.

Obviously, this should be made possible to do without that hack. Maybe I'm just putting the custom DocumentTitleHandler in the wrong place - if so, the doc could be updated to be more specific.

[Villva-vinoth]

const customTitleHandler = ({ resource, action, params }: any) => {
let title = "Admin App";
if (resource.name) {
title = resource.meta.label;
if (action) {
title += | ${action};
}
if (params?.id) {
title += | ${params.id};
}
}
return title;
};

it works for me !