How to change page title ?

Hey, i need help. I cant find way how to dynamicly change page title.

5 Replies

Hi @!!DETLIXX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Changing Page Titles in Refine There are two main approaches to dynamically change page titles in Refine: 1. Using the DocumentTitleHandler Component The DocumentTitleHandler component allows you to customize document titles globally:

import { BrowserRouter, DocumentTitleHandler } from "@refinedev/react-router";
import { Refine } from "@refinedev/core";

const App = () => {
  return (
    <BrowserRouter>
      <Refine /* ... */>
        {/* ... */}
        <DocumentTitleHandler
          handler={({ action, params, resource }) => {
            const id = params?.id ?? "";

            const actionPrefixMatcher = {
              create: "Create new ",
              clone: `#${id} Clone ${resource?.meta?.label}`,
              edit: `#${id} Edit ${resource?.meta?.label}`,
              show: `#${id} Show ${resource?.meta?.label}`,
              list: `${resource?.meta?.label}`,
            };

            const suffix = " | <Company Name>";
            const title = actionPrefixMatcher[action || "list"] + suffix;

            return title;
          }}
        />
      </Refine>
    </BrowserRouter>
  );
};

import { BrowserRouter, DocumentTitleHandler } from "@refinedev/react-router";
import { Refine } from "@refinedev/core";

const App = () => {
  return (
    <BrowserRouter>
      <Refine /* ... */>
        {/* ... */}
        <DocumentTitleHandler
          handler={({ action, params, resource }) => {
            const id = params?.id ?? "";

            const actionPrefixMatcher = {
              create: "Create new ",
              clone: `#${id} Clone ${resource?.meta?.label}`,
              edit: `#${id} Edit ${resource?.meta?.label}`,
              show: `#${id} Show ${resource?.meta?.label}`,
              list: `${resource?.meta?.label}`,
            };

            const suffix = " | <Company Name>";
            const title = actionPrefixMatcher[action || "list"] + suffix;

            return title;
          }}
        />
      </Refine>
    </BrowserRouter>
  );
};

This approach is documented in both React Router integration and Next.js integration. 2. Using the useDocumentTitle Hook For more granular control at the component level, you can use the useDocumentTitle hook:

import { useDocumentTitle } from "@refinedev/react-router";

const PostList = () => {
  useDocumentTitle("Posts | Refine");
  
  return <List>{/* ... */}</List>;
};

import { useDocumentTitle } from "@refinedev/react-router";

const PostList = () => {
  useDocumentTitle("Posts | Refine");
  
  return <List>{/* ... */}</List>;
};

The hook can also be used with i18n:

useDocumentTitle({ i18nKey: "documentTitle.posts.list" });

useDocumentTitle({ i18nKey: "documentTitle.posts.list" });

Or dynamically:

const setTitle = useDocumentTitle();

useEffect(() => {
  setTitle("Posts | Refine");
}, []);

const setTitle = useDocumentTitle();

useEffect(() => {
  setTitle("Posts | Refine");
}, []);

This hook is available in both React Router and Next.js router integrations. For non-CRUD pages (like custom routes), the useDocumentTitle hook is particularly useful as mentioned in a GitHub issue discussion. Note: The older Title prop of the <Refine> component is now deprecated. It's recommended to use the Title prop of the <ThemedLayoutV2 /> component instead for layout titles, which is different from document/page titles. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@410826510841151498> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

adverse-sapphireOP•2d ago

@kapa.ai And how can i remove that default title that is showing when i enter some resource site ? for example whwn i open list, it show xxx | Refine, i dont want that Refine there

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To remove the default "| Refine" suffix from your page titles, you can customize the DocumentTitleHandler component by providing a custom handler function that doesn't include the "Refine" suffix. Here's how you can do it:

import { BrowserRouter, DocumentTitleHandler } from "@refinedev/react-router";
import { Refine } from "@refinedev/core";

const App = () => {
  return (
    <BrowserRouter>
      <Refine /* ... */>
        {/* ... */}
        <DocumentTitleHandler
          handler={({ action, params, resource }) => {
            const id = params?.id ?? "";

            // Define your custom title format without the "| Refine" suffix
            const actionPrefixMatcher = {
              create: `Create new ${resource?.meta?.label || resource?.name}`,
              clone: `#${id} Clone ${resource?.meta?.label || resource?.name}`,
              edit: `#${id} Edit ${resource?.meta?.label || resource?.name}`,
              show: `#${id} Show ${resource?.meta?.label || resource?.name}`,
              list: `${resource?.meta?.label || resource?.name}`,
            };

            // Return the title without any suffix
            return actionPrefixMatcher[action || "list"];
          }}
        />
      </Refine>
    </BrowserRouter>
  );
};

import { BrowserRouter, DocumentTitleHandler } from "@refinedev/react-router";
import { Refine } from "@refinedev/core";

const App = () => {
  return (
    <BrowserRouter>
      <Refine /* ... */>
        {/* ... */}
        <DocumentTitleHandler
          handler={({ action, params, resource }) => {
            const id = params?.id ?? "";

            // Define your custom title format without the "| Refine" suffix
            const actionPrefixMatcher = {
              create: `Create new ${resource?.meta?.label || resource?.name}`,
              clone: `#${id} Clone ${resource?.meta?.label || resource?.name}`,
              edit: `#${id} Edit ${resource?.meta?.label || resource?.name}`,
              show: `#${id} Show ${resource?.meta?.label || resource?.name}`,
              list: `${resource?.meta?.label || resource?.name}`,
            };

            // Return the title without any suffix
            return actionPrefixMatcher[action || "list"];
          }}
        />
      </Refine>
    </BrowserRouter>
  );
};

This custom handler completely removes the "| Refine" suffix from all your page titles. You can also add your own custom suffix if needed, like your company or application name. If you don't want to use the DocumentTitleHandler component at all (which would prevent any automatic title generation), you can simply remove it from your application, as mentioned in a GitHub issue where a user had a similar problem. Alternatively, if you're using the useDocumentTitle hook in specific components, just make sure not to include "| Refine" in the titles you set. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@410826510841151498> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to change page title ?

Did you find this page helpful?