Custom title handler with Typescript

write a custom title handler with Typescript

5 Replies

kapa.ai•13mo ago

Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can write a custom title handler in TypeScript by providing a custom handler function to the DocumentTitleHandler component. This function will be invoked on every location change and it will receive an object with properties such as pathname, resource, action, autoGeneratedTitle, and params. Here is an example of how you can write a custom title handler in TypeScript:

const customTitleHandler = ({ resource, action, params }: { resource: string, action: string, params: { id: string } }) => {  
 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 }: { resource: string, action: string, params: { id: string } }) => {  
 let title = "Custom default"; // Default title  
  
 if(resource && action) {  
 title = `${resource} ${action} ${params.id}`;  
 }  
  
 return title;  
};  
  
// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

In this example, the customTitleHandler function generates a custom title based on the resource, action, and id parameter from the params object. If these properties are not available, it defaults to "Custom default". Please note that this example assumes that you are using a routing system that supports the DocumentTitleHandler component, such as Next.js or React Router v6. Sources: - Next.js Router Documentation (https://refine.dev/docs/packages/documentation/routers/nextjs/) - React Router v6 Documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

ratty-blush•13mo ago

create the same title handler as default refine title handler but remove "| refine" @kapa.ai

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can create a custom title handler that mimics the default behavior of the refine title handler, but without the "| refine" part. Here's how you can do it:

const customTitleHandler = ({ resource, action, params }: { resource: string, action: string, params: { id: string } }) => {
    let title = "";

    switch (action) {
        case "list":
            title = `${resource}`;
            break;
        case "edit":
            title = `#${params.id} Edit ${resource}`;
            break;
        case "show":
            title = `#${params.id} Show ${resource}`;
            break;
        case "create":
            title = `Create new ${resource}`;
            break;
        case "clone":
            title = `#${params.id} Clone ${resource}`;
            break;
        default:
            title = "";
    }

    return title;
};

// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

const customTitleHandler = ({ resource, action, params }: { resource: string, action: string, params: { id: string } }) => {
    let title = "";

    switch (action) {
        case "list":
            title = `${resource}`;
            break;
        case "edit":
            title = `#${params.id} Edit ${resource}`;
            break;
        case "show":
            title = `#${params.id} Show ${resource}`;
            break;
        case "create":
            title = `Create new ${resource}`;
            break;
        case "clone":
            title = `#${params.id} Clone ${resource}`;
            break;
        default:
            title = "";
    }

    return title;
};

// Usage  
<DocumentTitleHandler handler={customTitleHandler} />

In this example, the customTitleHandler function generates a custom title based on the resource, action, and id parameter from the params object. The function uses a switch statement to handle different actions and generate the appropriate title. Please note that this example assumes that you are using a routing system that supports the DocumentTitleHandler component, such as Next.js or React Router v6. Sources: - Next.js Router Documentation (https://refine.dev/docs/packages/documentation/routers/nextjs/) - React Router v6 Documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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