Change page title in browser

How to change page title (next to favicon)?

5 Replies

Hi @beg1c. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the page title in the browser tab, you can use the DocumentTitleHandler component provided by Refine. This component allows you to set the title of the page dynamically based on the current route. You can find more details in the Refine documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6/#documenttitlehandler). If you are using Next.js, you can check the Next.js documentation (https://nextjs.org/docs/messages/no-document-title#possible-ways-to-fix-it) for more information on how to handle the default title. If you want to change the title of the authentication page, you can use the title prop of the AuthPage component. Here is an example:

import { AuthPage } from "@refinedev/mui";  

const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My Title</h1>} />;  
};

import { AuthPage } from "@refinedev/mui";  

const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My Title</h1>} />;  
};

This example is for the Material-UI integration, but similar functionality is available for other UI libraries supported by Refine, such as Ant Design, Mantine, and Chakra UI. You can find more details in the respective sections of the Refine documentation (https://refine.dev/docs/ui-integrations/material-ui/components/auth-page#title). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@1212763978803974237> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•5mo ago

@kapa.ai Ok I managed it like this: <DocumentTitleHandler handler={(options) => options.autoGeneratedTitle = "SawmillManager"}/> Didn't work at first because I had two DocumentTitleHandler defined in App.tsx

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It's great to hear that you've managed to set the document title using the DocumentTitleHandler component. However, the way you're trying to set the title seems incorrect. The handler function should return the title, not set it on the options object. Here's how you can do it:

<DocumentTitleHandler handler={() => "SawmillManager"} />

<DocumentTitleHandler handler={() => "SawmillManager"} />

In this case, the title of every page will be "SawmillManager". If you want to set different titles for different pages, you can use the options parameter of the handler function. This object includes properties like pathname, resource, action, and params that you can use to generate the title dynamically. Also, make sure you only have one DocumentTitleHandler in your App.tsx. Having multiple instances might cause unexpected behavior. For more information, you can refer to the Refine documentation (https://refine.dev/docs/routing/integrations/react-router#documenttitlehandler). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@1212763978803974237> kapa.ai is still learning and improving, please let us know how it did by reacting below