How is document title in browser tab handled

11 Replies

Hi @natztheking. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, the document title in the browser tab can be managed using several methods depending on the routing library you are using. Here are the main ways to handle document titles: Using DocumentTitleHandler Component #### For React Router v6 The DocumentTitleHandler component in @refinedev/react-router-v6 automatically manages the document title based on the current route and action. By default, it follows predefined rules to generate titles, but you can customize it using a handler function. Default Title Generation Rules: - list: Posts | Refine - edit: #{id} Edit Post | Refine - show: #{id} Show Post | Refine - create: Create new Post | Refine - clone: #{id} Clone Post | Refine - default: Refine Usage Example:

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

const App = () => {  
  return (  
    <BrowserRouter>  
      <Refine>  
        <DocumentTitleHandler />  
      </Refine>  
    </BrowserRouter>  
  );  
};

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

const App = () => {  
  return (  
    <BrowserRouter>  
      <Refine>  
        <DocumentTitleHandler />  
      </Refine>  
    </BrowserRouter>  
  );  
};

Custom Handler Example:

const customTitleHandler = ({ resource, action, params }) => {  
  let title = "Custom default"; // Default title  
  
  if (resource && action) {  
    title = `${resource} ${action} ${params.id}`;  
  }  
  
  return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />;

const customTitleHandler = ({ resource, action, params }) => {  
  let title = "Custom default"; // Default title  
  
  if (resource && action) {  
    title = `${resource} ${action} ${params.id}`;  
  }  
  
  return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />;

Source (https://refine.dev/docs/routing/integrations/react-router/#documenttitlehandler) #### For Next.js The DocumentTitleHandler component in @refinedev/nextjs-router works similarly but is only supported in the pages directory. Usage Example:

import { Refine } from "@refinedev/core";
import { DocumentTitleHandler } from "@refinedev/nextjs-router/pages";
const App = () => {  
  return (  
    <Refine>  
      <DocumentTitleHandler />  
    </Refine>  
  );  
};

import { Refine } from "@refinedev/core";
import { DocumentTitleHandler } from "@refinedev/nextjs-router/pages";
const App = () => {  
  return (  
    <Refine>  
      <DocumentTitleHandler />  
    </Refine>  
  );  
};

Source (https://refine.dev/docs/routing/integrations/next-js/#documenttitlehandler) Using useDocumentTitle Hook #### For React Router v6 The useDocumentTitle hook allows you to set the document title for the current page. It can be used in any component that is a child of the <Refine> component. Usage Example:

import { useDocumentTitle } from "@refinedev/react-router-v6";  
  
const PostList = () => {  
  useDocumentTitle("Posts | Refine");  
  
  return <List>{/* ... */}</List>;  
};

import { useDocumentTitle } from "@refinedev/react-router-v6";  
  
const PostList = () => {  
  useDocumentTitle("Posts | Refine");  
  
  return <List>{/* ... */}</List>;  
};

Dynamic Title Example:

import { useDocumentTitle } from "@refinedev/react-router-v6";  
  
const PostList = () => {  
  const setTitle = useDocumentTitle();  
  
  useEffect(() => {  
    setTitle("Posts | Refine");  
  }, []);  
  
  return <List>{/* ... */}</List>;  
};

import { useDocumentTitle } from "@refinedev/react-router-v6";  
  
const PostList = () => {  
  const setTitle = useDocumentTitle();  
  
  useEffect(() => {  
    setTitle("Posts | Refine");  
  }, []);  
  
  return <List>{/* ... */}</List>;  
};

Source (https://refine.dev/docs/routing/integrations/react-router/#usedocumenttitle) #### For Next.js The useDocumentTitle hook in @refinedev/nextjs-router works similarly but does not support server-side rendering (SSR). **Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

stormy-gold•2w ago

@kapa.ai change the default | Refine in it

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To change the default "| Refine" in the document title, you can customize the DocumentTitleHandler component by providing a custom handler function. This function allows you to define how the document title should be generated based on the current route and action. Here is an example of how to customize the document title using the DocumentTitleHandler component in a React Router v6 setup: Customizing Document Title in React Router v6 1. Install the necessary packages: Make sure you have @refinedev/core and @refinedev/react-router-v6 installed. 2. Create a custom title handler function: Define a function that generates the document title based on the resource, action, and parameters. 3. Use the DocumentTitleHandler component with the custom handler: Pass the custom handler function to the DocumentTitleHandler component.

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

const customTitleHandler = ({ resource, action, params }) => {
  let title = "My Custom App"; // Default title

  if (resource && action) {
    title = `${resource} ${action} ${params.id} | My Custom App`;
  }

  return title;
};

const App = () => {
  return (
    <BrowserRouter>
      <Refine>
        <DocumentTitleHandler handler={customTitleHandler} />
      </Refine>
    </BrowserRouter>
  );
};

export default App;

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

const customTitleHandler = ({ resource, action, params }) => {
  let title = "My Custom App"; // Default title

  if (resource && action) {
    title = `${resource} ${action} ${params.id} | My Custom App`;
  }

  return title;
};

const App = () => {
  return (
    <BrowserRouter>
      <Refine>
        <DocumentTitleHandler handler={customTitleHandler} />
      </Refine>
    </BrowserRouter>
  );
};

export default App;

Customizing Document Title in Next.js 1. Install the necessary packages: Make sure you have @refinedev/core and @refinedev/nextjs-router installed. 2. Create a custom title handler function: Define a function that generates the document title based on the resource, action, and parameters. 3. Use the DocumentTitleHandler component with the custom handler: Pass the custom handler function to the DocumentTitleHandler component.

import { Refine } from "@refinedev/core";
import { DocumentTitleHandler } from "@refinedev/nextjs-router/pages";

const customTitleHandler = ({ resource, action, params }) => {
  let title = "My Custom App"; // Default title

  if (resource && action) {
    title = `${resource} ${action} ${params.id} | My Custom App`;
  }

  return title;
};

const App = () => {
  return (
    <Refine>
      <DocumentTitleHandler handler={customTitleHandler} />
    </Refine>
  );
};

export default App;

import { Refine } from "@refinedev/core";
import { DocumentTitleHandler } from "@refinedev/nextjs-router/pages";

const customTitleHandler = ({ resource, action, params }) => {
  let title = "My Custom App"; // Default title

  if (resource && action) {
    title = `${resource} ${action} ${params.id} | My Custom App`;
  }

  return title;
};

const App = () => {
  return (
    <Refine>
      <DocumentTitleHandler handler={customTitleHandler} />
    </Refine>
  );
};

export default App;

By using a custom handler function, you can easily change the default "| Refine" to any other string that suits your application's needs. For more details, you can refer to the official documentation: - React Router v6 Integration (https://refine.dev/docs/routing/integrations/react-router/#documenttitlehandler) - Next.js Integration (https://refine.dev/docs/routing/integrations/next-js/#documenttitlehandler) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

stormy-gold•2w ago

@kapa.ai using react-router-v6 i have several type scripterror

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you are encountering TypeScript errors while using react-router-v6 with refine, it might be related to the new moduleResolution option in TypeScript 5. This issue has been reported and discussed in the refine GitHub repository. Issue Description When using TypeScript 5 with the moduleResolution set to "Bundler", you might encounter errors like:

src/App.tsx:6:56 - error TS7016: Could not find a declaration file for module '@refinedev/react-router-v6'.

src/App.tsx:6:56 - error TS7016: Could not find a declaration file for module '@refinedev/react-router-v6'.

Steps to Reproduce 1. Create a new refine project with Vite and TypeScript v5. 2. Set tsconfig.json with moduleResolution to "Bundler" and module to "ESNext". 3. Import @refinedev/react-router-v6 in any file. 4. Run npm run build. Solution The refine team is aware of this issue and a quick PR has been made to address it. Here is a comment from the GitHub issue:

Hey @dzcpy, sorry for the issue and thanks for the quick PR! Did you ran into the same issue for other refine packages or just for the @refinedev/react-router-v6? We'll also review the PR and check if we need to apply any changes to other packages as well 🚀

Workaround While waiting for the official fix, you can try the following workaround: 1. Ensure Type Declarations: Make sure that the type declarations are correctly referenced in your tsconfig.json. 2. Manual Type Declarations: If the issue persists, you can manually create a type declaration file for @refinedev/react-router-v6. Example of Manual Type Declaration Create a file named @refinedev__react-router-v6.d.ts in your src directory with the following content:

declare module '@refinedev/react-router-v6' {
  // Add the necessary type declarations here
}

declare module '@refinedev/react-router-v6' {
  // Add the necessary type declarations here
}

Reference For more details, you can refer to the GitHub issue: - GitHub Issue #4999 (https://github.com/refinedev/refine/issues/4999) By following these steps, you should be able to mitigate the TypeScript errors until an official fix is released. If you continue to experience issues, keep an eye on the GitHub issue for updates from the refine team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

stormy-gold•2w ago

@kapa.ai const customTitleHandler = ({ resource, action, params }) => { let title = "My Custom App"; // Default title if (resource && action) { title = ${resource} ${action} ${params.id} | My Custom App; } return title; }; thisshowstypescript error4

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To address the TypeScript error in your custom title handler function, you need to ensure that the types for resource, action, and params are correctly defined. Here is how you can define the types and use them in your custom title handler function: Step-by-Step Solution 1. Define the Types: Define the types for resource, action, and params based on your application's requirements. 2. Use the Types in the Handler Function: Apply the types to the parameters of the handler function to avoid TypeScript errors. Example Here is an example of how you can define and use the types in your custom title handler function:

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

const customTitleHandler = ({ resource, action, params }: DocumentTitleHandlerProps) => {
  let title = "My Custom App"; // Default title

  if (resource && action) {
    title = `${resource} ${action} ${params?.id} | My Custom App`;
  }

  return title;
};

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

const customTitleHandler = ({ resource, action, params }: DocumentTitleHandlerProps) => {
  let title = "My Custom App"; // Default title

  if (resource && action) {
    title = `${resource} ${action} ${params?.id} | My Custom App`;
  }

  return title;
};

Explanation - Import DocumentTitleHandlerProps: Import the DocumentTitleHandlerProps type from @refinedev/react-router-v6 to use it in your function. - Apply the Type: Apply the DocumentTitleHandlerProps type to the parameters of the customTitleHandler function. - Optional Chaining for params.id: Use optional chaining (params?.id) to handle cases where params might be undefined. Usage in DocumentTitleHandler Now, you can use the customTitleHandler function in the DocumentTitleHandler component without TypeScript errors:

import { BrowserRouter } from "react-router-dom";
import { Refine } from "@refinedev/core";
import { DocumentTitleHandler } from "@refinedev/react-router-v6";
const App = () => {
  return (
    <BrowserRouter>
      <Refine>
        <DocumentTitleHandler handler={customTitleHandler} />
      </Refine>
    </BrowserRouter>
  );
};

export default App;

import { BrowserRouter } from "react-router-dom";
import { Refine } from "@refinedev/core";
import { DocumentTitleHandler } from "@refinedev/react-router-v6";
const App = () => {
  return (
    <BrowserRouter>
      <Refine>
        <DocumentTitleHandler handler={customTitleHandler} />
      </Refine>
    </BrowserRouter>
  );
};

export default App;

By following these steps, you should be able to resolve the TypeScript errors in your custom title handler function. For more details, you can refer to the official documentation: - React Router v6 Integration (https://refine.dev/docs/routing/integrations/react-router/#documenttitlehandler) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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