[FEAT] Add fallback and namespace for useDocumentTitle

[indramal]

Is your feature request related to a problem? Please describe.

I can see when I add page title using useDocumentTitle, Sometimes, it is not available in i18n JSON file. So I suggest to use fallback/default title for page.

Also sometime I use different namespace files for each pages. I unable to set namespace for useDocumentTitle.

I use below code when have useDocumentTitle hook.

const translate= useTranslate();

  useEffect(() => {
    document.title = translate("pages.login.title", "Login") ;
  }, [t]);

Describe alternatives you've considered

No response

Additional context

No response

Describe the thing to improve

I can see same implementation use in useDocumentTitle hook -

refine/packages/react-router/src/use-document-title.ts

Line 6 in 51ad5ec

export const useDocumentTitle = (title?: Title) => {

So I suggest to add fallback/default title and namespace.

I suggest code:

import { useTranslate } from "@refinedev/core";
import { useCallback, useEffect } from "react";

type Title = string | { i18nKey: string };

type UseDocumentTitleOptions = {
  namespace?: string;
  defaultTitle?: string;
};

export const useDocumentTitle = (
  title?: Title,
  options?: UseDocumentTitleOptions
) => {
  const translate = useTranslate();

  const getTitle = useCallback(
    (title: Title) => {
      const key = typeof title === "string" ? title : title.i18nKey;

      return translate(
        key,
        {
          ns: options?.namespace,
        },
        options?.defaultTitle
      );
    },
    [translate, options?.defaultTitle, options?.namespace]
  );

  useEffect(() => {
    if (!title) return;

    document.title = getTitle(title);
  }, [title, getTitle]);

  return (title: Title) => {
    document.title = getTitle(title);
  };
};

[Manthancode28]

Hi @indramal 👋
I’d like to work on this feature and submit a PR.
Please assign this issue to me if it’s available. Thanks!