wise-white•5mo ago

Change app title from "refine" to anything else

How can I remove the default title? I've double checked anywhere I can think of changing it, but have no luck as it seems to override anything I set. In my index.html, I have the following set:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Acme Company Dashboard" />
        <title>Acme Company Dashboard</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="module" src="./src/index.tsx"></script>
        <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm dev` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Acme Company Dashboard" />
        <title>Acme Company Dashboard</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="module" src="./src/index.tsx"></script>
        <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm dev` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    </body>
</html>

I know that I can set it by using:

useDocumentTitle("Posts | Acme Company Dashboard");

useDocumentTitle("Posts | Acme Company Dashboard");

It's annoying to do it that way but possible, but it doesn't have an effect on the title used in Chrome tabs/ Site title.

5 Replies

kapa.ai•5mo ago

Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, the title of the application can be set by passing the Title property to the <Refine> component. However, this method is deprecated. Instead, you can use the Title prop in the <ThemedLayoutV2> component to set a custom title. This can be done for different UI integrations like Material-UI, Ant Design, and Mantine. Here's an example of how to do it:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/mui"; // or "@refinedev/antd" or "@refinedev/mantine" depending on your UI library
  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Title={({ collapsed }) => (  
 <ThemedTitleV2  
 // collapsed is a boolean value that indicates whether the <Sidebar> is collapsed or not  
 collapsed={collapsed}  
 icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
 text="My Project"  
 />  
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/mui"; // or "@refinedev/antd" or "@refinedev/mantine" depending on your UI library
  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Title={({ collapsed }) => (  
 <ThemedTitleV2  
 // collapsed is a boolean value that indicates whether the <Sidebar> is collapsed or not  
 collapsed={collapsed}  
 icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
 text="My Project"  
 />  
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

In this example, "My Project" is the title that will be displayed. For the login page, you can use the title prop in the <AuthPage> component to set a custom title. Here's an example:

import { AuthPage } from "@refinedev/mui"; // or "@refinedev/antd" or "@refinedev/chakra-ui" depending on your UI library
  
const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My Title</h1>} />;  
};

import { AuthPage } from "@refinedev/mui"; // or "@refinedev/antd" or "@refinedev/chakra-ui" depending on your UI library
  
const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My Title</h1>} />;  
};

In this example, "My Title" is the title that will be displayed on the login page. However, if you're using Next.js and want to set a default title for all pages, you might need to use the <DocumentTitleHandler /> component as suggested in a Discord support thread (https://discord.com/channels/837692625737613362/1156174086175731743). If the default title is still not changing, it might be an issue with Next.js itself, and you might need to check the Next.js documentation (https://nextjs.org/docs/messages/no-document-title#possible-ways-to-fix-it) for more information. Please note that the title set in the index.html file might not have an effect on a React application, as the application is rendered inside the div with the id root, and the title might be overridden by the React application. Sources: - Refine Component (https://refine.dev/docs/core/refine-component#title-) - ThemedLayout Component in Material-UI (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout#title) - ThemedLayout Component in Ant Design (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout#title) - ThemedLayout Component in Mantine (https://refine.dev/docs/ui-integrations/mantine/components/themed-layout#title) - AuthPage Component in Material-UI (https://refine.dev/docs/ui-integrations/material-ui/components/auth-page#title) - AuthPage Component in Chakra-UI (https://refine.dev/docs/ui-integrations/chakra-ui/components/auth-page#title) - [AuthPage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

wise-white•5mo ago

@kapa.ai That doesn't have any effect as let's say I go to /users, the title reads "Users | refine"

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To change the title when you navigate to different pages (like /users), you can use the useDocumentTitle hook provided by Refine. This hook allows you to set the document title dynamically based on the current page. Here's an example of how you can use it in your Users component:

import { useDocumentTitle } from "@refinedev/core";

const Users = () => {
    useDocumentTitle("Users | Acme Company Dashboard");

    // rest of your component code
}

import { useDocumentTitle } from "@refinedev/core";

const Users = () => {
    useDocumentTitle("Users | Acme Company Dashboard");

    // rest of your component code
}

In this example, when you navigate to the Users page, the title of the document will be set to "Users | Acme Company Dashboard". Please note that you need to call useDocumentTitle in each component where you want to change the document title. If you have many pages and want to avoid repeating this code, you could create a higher-order component or a custom hook that wraps useDocumentTitle and takes the title as a parameter. Sources: - Refine Basic Tutorial (https://refine.dev/tutorial) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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