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
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
export const CreatePage: React.FC = () => {
return (
<Create
pageHeaderProps={
onBack: () => console.log("Hello, refine"),
subTitle: "Subtitle",
}
</Create>
);
}; ----------------------
<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:
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:
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>
);
}; ----------------------
<@539513465103056900> kapa.ai is still learning and improving, please let us how it did by reacting below
passive-yellow•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