custom document header to remove "| refine"

12 Replies

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can customize the document header in refine by using the useDocumentTitle hook. This hook allows you to set the document title for the current page. It can be used in any component that is a child of the <Refine> component. Here is an example of how you can use it:

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

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

In this example, the document title is set to "Posts". You can replace "Posts" with any string you want to set as your document title. Please note that this hook doesn't support SSR. It will only set the document title on the client side. For more information, you can refer to the documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6). If you want to set the document title dynamically, you can use the function returned by the useDocumentTitle hook. Here is an example:

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

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

In this example, the document title is set to "Posts" when the component is mounted. You can replace "Posts" with any string you want to set as your document title. For more information, you can refer to the documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

exotic-emeraldOP•2y ago

@kapa.ai how to ask refine not to set document title??

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine provides a DocumentTitleHandler component that generates the document title for the current page. If you want to prevent refine from setting the document title, you can simply not include this component in your application. Here is an example of how you can use it:

const App = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 /* ... */  
 >  
 {/* ... */}  
 {/* <DocumentTitleHandler />  Comment this line to prevent refine from setting the document title */}
 </Refine>  
 </BrowserRouter>  
 );  
};

const App = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 /* ... */  
 >  
 {/* ... */}  
 {/* <DocumentTitleHandler />  Comment this line to prevent refine from setting the document title */}
 </Refine>  
 </BrowserRouter>  
 );  
};

In this example, the DocumentTitleHandler component is commented out, so refine will not set the document title. For more information, you can refer to the documentation (https://refine.dev/docs/packages/documentation/routers/nextjs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

exotic-emeraldOP•2y ago

@kapa.ai override DocumentTitleHandler

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can override the DocumentTitleHandler in refine by providing a custom handler function. This function will be invoked on every location change and it will receive an object with the following properties: - pathname: The current URL pathname. - resource: The resource being displayed (e.g., "posts"). - action: The action being performed (e.g., "edit", "show", "create"). - autoGeneratedTitle: The default auto-generated title based on the predefined rules. - params: An object containing URL parameters, including the id parameter if present. Inside the handler function, you can dynamically generate the document title based on the provided properties and any additional logic required. The function should return the generated title. Here is an example of how you can use it:

const customTitleHandler = ({ resource, action, params }) => {  
 let title = "Custom default"; // Default title  
  
 if(resource && action) {  
 title = `${resource} ${action} ${params.id}`;  
 }  
  
 return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

const customTitleHandler = ({ resource, action, params }) => {  
 let title = "Custom default"; // Default title  
  
 if(resource && action) {  
 title = `${resource} ${action} ${params.id}`;  
 }  
  
 return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

In this example, the customTitleHandler function generates a custom document title based on the resource, action, and params properties. This function is then passed to the handler prop of the DocumentTitleHandler component. For more information, you can refer to the documentation (https://refine.dev/docs/packages/documentation/routers/nextjs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

fair-rose•2y ago

Hello @dreamer9067 is your issue resolved with the latest answer?

exotic-emeraldOP•2y ago

Yes thanks @kapa.ai not getting pageheader component to swizzle, any idea why??

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about swizzling the PageHeader component in refine. Swizzling is a process to override the default components provided by refine. It's usually done using the refine CLI. However, not all components may be available for swizzling. I would recommend checking the refine documentation (https://refine.dev/docs) or the refine CLI documentation (https://refine.dev/docs/packages/documentation/cli/) for more information on how to swizzle components and which components are available for swizzling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

custom document header to remove "| refine"

Did you find this page helpful?