<DocumentTitleHandler />

How to adjust the title of document ? Now it displays "{source} | Refine" - I want to replace Refine to my name

2 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can customize the document title in refine by using the <DocumentTitleHandler /> component with a custom handler function. This allows you to replace the default "Refine" suffix with your own name. Here's how to do it:

<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 = " | Your Name"; // Replace "Your Name" with your name
    const title = actionPrefixMatcher[action || "list"] + suffix;

    return title;
  }}
/>

<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 = " | Your Name"; // Replace "Your Name" with your name
    const title = actionPrefixMatcher[action || "list"] + suffix;

    return title;
  }}
/>

Place this component inside your <Refine> component in your app's main file. This will override the default title generation logic and replace "Refine" with your name in the document title. For React Router integration, you can find more details in the React Router documentation. For Next.js integration, similar functionality is available as documented in the Next.js integration documentation. Alternatively, for specific pages, you can use the useDocumentTitle hook to set custom titles for individual components:

import { useDocumentTitle } from "@refinedev/react-router"; // or "@refinedev/nextjs-router/pages" for Next.js

const MyComponent = () => {
  useDocumentTitle("My Page | Your Name");
  
  return <div>My Component</div>;
};

import { useDocumentTitle } from "@refinedev/react-router"; // or "@refinedev/nextjs-router/pages" for Next.js

const MyComponent = () => {
  useDocumentTitle("My Page | Your Name");
  
  return <div>My Component</div>;
};

---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

<DocumentTitleHandler />

Did you find this page helpful?