itchy-amethyst•2y ago

Custom Title per page

Hi all, I'm trying to achieve something that should be easy but I'm not able to do. I've an HEADLESS installation using a simple custom layout structured like HEADER - Title - Menu CONTENT -... FOOTER Something ideally simple. I want to set the TITLE per custom page How can I achieve that? useTitle is not working as the Title is set at App level and there's no title prop I can use to customize it. I could use a Context to create a custom hook like usePageTitle but, how can I set the title value based on the route I'm in and pass it to the layout? To achieve something that should be basic seems extra-confusing 😦 Thanks!

3 Replies

kapa.ai•2y ago

Hey @.simoneb! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- It sounds like you're looking for a way to set a custom title per page in your React-based application. You can do this by using the <Title> component provided by Refine, which is used in the <Sider> component. You can access the <Title> component from various parts of the application using the useTitle hook. Here's an example of how you can use the <Title> component and useTitle hook to set a custom title per page:

import { Refine } from "@pankod/refine";  
import routerProvider from "@pankod/refine-react-router";  
import dataProvider from "@pankod/refine-simple-rest";  
  
import "@pankod/refine/dist/styles.min.css";  
  
export const App: React.FC = () => {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider("https://api.fake-rest.refine.dev")}  
 Title={({ collapsed }) => (  
 <div>  
 {collapsed && <img src="./logo" alt="Logo" />}  
 <span>Custom Title</span>  
 </div>  
 )}  
 />  
 );  
};

import { Refine } from "@pankod/refine";  
import routerProvider from "@pankod/refine-react-router";  
import dataProvider from "@pankod/refine-simple-rest";  
  
import "@pankod/refine/dist/styles.min.css";  
  
export const App: React.FC = () => {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider("https://api.fake-rest.refine.dev")}  
 Title={({ collapsed }) => (  
 <div>  
 {collapsed && <img src="./logo" alt="Logo" />}  
 <span>Custom Title</span>  
 </div>  
 )}  
 />  
 );  
};

import { AntdLayout, useTitle } from "@pankod/refine-antd";  
  
export const CustomSider: React.FC = () => {  
 const [collapsed, setCollapsed] = React.useState(false);  
 const Title = useTitle();  
  
 return (  
 <AntdLayout.Sider  
 collapsible  
 breakpoint="md"  
 collapsed={collapsed}  
 onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}  
 >  
 <Title collapsed={collapsed} />  
 ...  
 </AntdLayout.Sider>  
 );  
};

import { AntdLayout, useTitle } from "@pankod/refine-antd";  
  
export const CustomSider: React.FC = () => {  
 const [collapsed, setCollapsed] = React.useState(false);  
 const Title = useTitle();  
  
 return (  
 <AntdLayout.Sider  
 collapsible  
 breakpoint="md"  
 collapsed={collapsed}  
 onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}  
 >  
 <Title collapsed={collapsed} />  
 ...  
 </AntdLayout.Sider>  
 );  
};

You can also use the title prop in the <Edit>, <Show>, and <Create> components provided by Refine Ant Design to set a custom title per page. Here's an example of how you can use the title prop in the <Create> component:

import { Create } from "@pankod/refine-antd";  
  
const PostCreate: React.FC = () => {  
 return (  
 <Create title="Custom Title">  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

import { Create } from "@pankod/refine-antd";  
  
const PostCreate: React.FC = () => {  
 return (  
 <Create title="Custom Title">  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

Finally, you can use the pageHeaderProps prop in the <Create> component to customize the title with the props of <PageHeader>. Here's an example of how you can use the pageHeaderProps prop: ``` import { Create } from "@pankod/refine";

export const CreatePage: React.FC = () => {
return (
<Create
pageHeaderProps={
onBack: () => console.log("Hello, refine"),
subTitle: "Subtitle",
}

...
</Create>
);
}; ----------------------

kapa.ai•2y ago

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

itchy-amethyst•2y ago

Thanks but I'm not using ANTD 🙂 I'm looking for an headless solution If it can be of help to anyone I've solved using useContext and Provider to pass title and setTitle to the child components and setting the title in the custom pages 😉 seems a bit an overkill to me in a framework like refine but... whatever