optimistic-gold•2y ago

whats best practice for customizing document title on a specific resource route?

Essentially, I have a show route that I want the document title to be "{name of user} Artist Review | MyService" instead of what it currently is, which is "#1 Show Review Artist | MyService" what is the best practice for this?

2 Replies

kapa.ai•2y ago

Hi @derekdoes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the useDocumentTitle hook or the DocumentTitleHandler component provided by Refine, depending on your routing system. If you're using Next.js or React Router v6, you can use the useDocumentTitle hook to set the document title for the current page. This hook can be used in any component that is a child of the <Refine> component. Here's an example:

import { useDocumentTitle } from "@refinedev/nextjs-router"; // or "@refinedev/react-router-v6"  
  
const ArtistReview = () => {  
  const artistName = "Name of User"; // Replace this with actual data
  useDocumentTitle(`${artistName} Artist Review | MyService`);  
  
  return (  
    <Show>  
      {/* ... */}  
    </Show>  
  );  
};

import { useDocumentTitle } from "@refinedev/nextjs-router"; // or "@refinedev/react-router-v6"  
  
const ArtistReview = () => {  
  const artistName = "Name of User"; // Replace this with actual data
  useDocumentTitle(`${artistName} Artist Review | MyService`);  
  
  return (  
    <Show>  
      {/* ... */}  
    </Show>  
  );  
};

Next.js Source (https://refine.dev/docs/packages/documentation/routers/nextjs) React Router v6 Source (https://refine.dev/docs/packages/documentation/routers/react-router-v6) Alternatively, if you want to handle the document title dynamically based on the route, you can use the DocumentTitleHandler component. This component accepts a handler function that gets invoked on every location change. You can use this function to generate the document title based on the current route. Here's an example:

const customTitleHandler = ({ resource, action, params }) => {  
  let title = "Custom default"; // Default title  
  
  if(resource === "artist" && action === "show") {  
    title = `${params.name} Artist Review | MyService`;  
  }  
  
  return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

const customTitleHandler = ({ resource, action, params }) => {  
  let title = "Custom default"; // Default title  
  
  if(resource === "artist" && action === "show") {  
    title = `${params.name} Artist Review | MyService`;  
  }  
  
  return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

Source (https://refine.dev/docs/packages/documentation/routers/react-router-v6) Please replace "Name of User" and params.name with the actual data you have. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

whats best practice for customizing document title on a specific resource route?

Did you find this page helpful?