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.