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:
I know that I can set it by using:
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
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:
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:
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:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•6mo ago
@kapa.ai That doesn't have any effect as let's say I go to /users, the title reads "Users | refine"
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:
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:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below