wise-white•2mo ago

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

kapa.ai•2mo ago

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.

   import { useDocumentTitle } from "@refinedev/react-router-v6";  
     
   const PostList = () => {  
     useDocumentTitle("Custom App Name | Posts");  
     
     return <List>{/* ... */}</List>;  
   };

   import { useDocumentTitle } from "@refinedev/react-router-v6";  
     
   const PostList = () => {  
     useDocumentTitle("Custom App Name | Posts");  
     
     return <List>{/* ... */}</List>;  
   };

Alternatively, you can use the hook to set the title dynamically:

   import { useDocumentTitle } from "@refinedev/react-router-v6";  
     
   const PostList = () => {  
     const setTitle = useDocumentTitle();  
     
     useEffect(() => {  
       setTitle("Custom App Name | Posts");  
     }, []);  
     
     return <List>{/* ... */}</List>;  
   };

   import { useDocumentTitle } from "@refinedev/react-router-v6";  
     
   const PostList = () => {  
     const setTitle = useDocumentTitle();  
     
     useEffect(() => {  
       setTitle("Custom App Name | Posts");  
     }, []);  
     
     return <List>{/* ... */}</List>;  
   };

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:

   const App = () => {  
     return (  
       <BrowserRouter>  
         <Refine  
         /* ... */  
         >  
           {/* ... */}  
           <DocumentTitleHandler 
             handler={(title) => `Custom App Name | ${title}`} 
           />  
         </Refine>  
       </BrowserRouter>  
     );  
   };

   const App = () => {  
     return (  
       <BrowserRouter>  
         <Refine  
         /* ... */  
         >  
           {/* ... */}  
           <DocumentTitleHandler 
             handler={(title) => `Custom App Name | ${title}`} 
           />  
         </Refine>  
       </BrowserRouter>  
     );  
   };

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: ----------------------

kapa.ai•2mo ago

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