Dynamic Window Title

Hi, first of all i`m new in refine world. is there any option to make dynamic window Title ?

3 Replies

Hey @rdjanuar! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- Yes, you can set a dynamic document title in refine. To do this, you need to pass the Title property to the Layout component when using the new routing system. You can also pass a custom title component to the Title property. For example, you can create a custom title component like this:

const CustomTitle = ({ collapsed }) => (  
 <div>{collapsed ? "Collapsed Title" : "Full Title"}</div>  
);

const CustomTitle = ({ collapsed }) => (  
 <div>{collapsed ? "Collapsed Title" : "Full Title"}</div>  
);

Then, you can pass it to the Title property in the Refine component like this:

const App: React.FC = () => (  
 <Refine  
 ...  
 Title={CustomTitle}  
 />  
);

const App: React.FC = () => (  
 <Refine  
 ...  
 Title={CustomTitle}  
 />  
);

For more information, please refer to the refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config). ----------------------

kapa.ai•2y ago

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

Omer•2y ago

Hey @rdjanuar , You can handle this like a Vanilla react projects 🚀 https://www.kindacode.com/article/ways-to-set-page-title-dynamically-in-react/

A Goodman

Kindacode

2 Ways to Set Page Title Dynamically in React - Kindacode

This article shows you 2 approaches to programmatically changing the page title in a React web app. We will go through 2 examples: the first one uses