rival-black•5mo ago

Change title of app (displayed in tab)

Hey all, Apologies for the (likely) simple question. I have a refine app that I want to deploy. The title in tabs is currently "{resource label} | refine". I'd like it to be "{resource label} | {app name}". Where can I set the app name?

2 Replies

kapa.ai•5mo ago

Hi @jvheaney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can configure the page title/name on browser tabs in Refine by using the DocumentTitleHandler component provided by the router integration packages. This component allows you to manage document titles depending on the resource and actions of the current route. Here is an example of how to use it in your App.tsx file:

import routerBindings, {  
 DocumentTitleHandler,  
} from "@refinedev/react-router-v6";  
import { BrowserRouter, Route, Routes } from "react-router-dom";  

function App() {  
 return (  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerBindings}  
 >  
 <Routes>  
 <Route index element={<WelcomePage />} />  
 </Routes>  
 <DocumentTitleHandler />  
 </Refine>  
 </BrowserRouter>  
 );  
}

import routerBindings, {  
 DocumentTitleHandler,  
} from "@refinedev/react-router-v6";  
import { BrowserRouter, Route, Routes } from "react-router-dom";  

function App() {  
 return (  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerBindings}  
 >  
 <Routes>  
 <Route index element={<WelcomePage />} />  
 </Routes>  
 <DocumentTitleHandler />  
 </Refine>  
 </BrowserRouter>  
 );  
}

In this example, DocumentTitleHandler is imported from @refinedev/react-router-v6 and used inside the Refine component. This will automatically manage the document title based on the current route. For more details, you can refer to the official documentation here (https://refine.dev/docs/packages/documentation/routers/react-router-v6/#documenttitlehandler). Please note that the DocumentTitleHandler component is also available in the @refinedev/nextjs-router package if you are using Next.js. However, it is not available in the @refinedev/remix-router package due to Remix handling titles differently. If you want to customize the title further, you might need to create a custom hook or component that listens to route changes and updates the document title accordingly. This would involve using the useDocumentTitle hook and the onDocumentTitle callback in the Refine component, as discussed in this Github issue (https://github.com/refinedev/refine/issues/2810). However, this is a more advanced topic and might require a deeper understanding of React and Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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