How to Change Page Title From Refine
I am using the CRM example as a starting point but I can't find how to change the Page title from having "Refine" in it. It is using the DocumentTitleHandler but I can't seem to figure out how to change it to our app name.
2 Replies
Hi @Jonathan. 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 from having "Refine" in it to your app name, you can use the
useDocumentTitle
hook provided by Refine. This hook allows you to set the document title for the current page dynamically.
Here is how you can do it:
1. Using useDocumentTitle
Hook:
You can use the useDocumentTitle
hook in any component that is a child of the <Refine>
component. This hook can take a string or an object with an i18nKey
for translation.
Alternatively, you can use the hook to set the title dynamically:
2. Using DocumentTitleHandler
Component:
If you are using the DocumentTitleHandler
component, you can customize the title generation process by providing a custom handler
function. Here is an example of how to use it:
By using either the useDocumentTitle
hook or customizing the DocumentTitleHandler
, you can ensure that your app's name is reflected in the page titles instead of "Refine".
For more detailed information, you can refer to the useDocumentTitle documentation (https://refine.dev/docs/routing/integrations/react-router/#usedocumenttitle) and the DocumentTitleHandler documentation (https://refine.dev/docs/routing/integrations/next-js/#documenttitlehandler).
If you need to see a working example, you can try the CRM example on CodeSandbox: Open app-crm example from refine (https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/app-crm?view=preview&theme=dark&codemirror=1).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@697199226802929705> kapa.ai is still learning and improving, please let us know how it did by reacting below